CSS 在媒体查询中使用变量


在媒体查询中使用变量

现在,我们希望在媒体查询(media queries)中修改变量值。

提示:媒体查询(media queries)旨在为不同的设备(显示器、平板电脑、手机等)定义不同的样式规则。您可以在“媒体查询”一章中学习更多有关媒体查询的知识。

在这里,我们首先为 .containe 类声明一个名为 —fontsize 的新局部变量。我们将其值设置为 25 像素。然后我们在 .container 类中进一步使用它。然后,我们创建一个 @media 规则,内容为“当浏览器的宽度为 450px 或更宽时,将 .container 类的 —fontsize 变量值更改为 50px。”

这是完整的实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. /* 变量声明 */
  7. :root {
  8. --blue: #1e90ff;
  9. --white: #ffffff;
  10. }
  11. .container {
  12. --fontsize: 25px;
  13. }
  14. /* 样式 */
  15. body {
  16. background-color: var(--blue);
  17. }
  18. h2 {
  19. border-bottom: 2px solid var(--blue);
  20. }
  21. .container {
  22. color: var(--blue);
  23. background-color: var(--white);
  24. padding: 15px;
  25. font-size: var(--fontsize);
  26. }
  27. @media screen and (min-width: 450px) {
  28. .container {
  29. --fontsize: 50px;
  30. }
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <h1>在媒体查询中使用变量</h1>
  36. <div class="container">
  37. <h2>欢迎来到成都!</h2>
  38. <p>当浏览器的宽度小于 450px 时,此 div 的字体大小为 25px。当其为 450px 或更宽时,请将 --fontsize 变量值设置为 50px。请调整浏览器窗口的大小来查看效果。</p>
  39. </div>
  40. </body>
  41. </html>

这是另一个例子,在其中我们还更改了 @media 规则中 —blue 变量的值:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. /* 变量声明 */
  7. :root {
  8. --blue: #1e90ff;
  9. --white: #ffffff;
  10. }
  11. .container {
  12. --fontsize: 25px;
  13. }
  14. /* 样式 */
  15. body {
  16. background-color: var(--blue);
  17. }
  18. h2 {
  19. border-bottom: 2px solid var(--blue);
  20. }
  21. .container {
  22. color: var(--blue);
  23. background-color: var(--white);
  24. padding: 15px;
  25. font-size: var(--fontsize);
  26. }
  27. @media screen and (min-width: 450px) {
  28. .container {
  29. --fontsize: 50px;
  30. }
  31. :root {
  32. --blue: lightblue;
  33. }
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <h1>在媒体查询中使用变量</h1>
  39. <div class="container">
  40. <h2>欢迎来到成都!</h2>
  41. <p>当浏览器的宽度为 450px 或更宽时,将 --fontsize 变量值设置为 50px,将 --blue 变量值设置为 lightblue。请调整浏览器窗口的大小以查看效果。</p>
  42. </div>
  43. </body>
  44. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

函数
var()49.015.031.09.136.0

CSS var() 函数

函数描述
var()插入 CSS 变量的值。

分类导航