CSS 在媒体查询中使用变量 https://www.w3school.com.cn/css/css3_variables_mediaqueries.asp

css变量

  1. <html>
  2.   <style>
  3.     :root { 
  4.       --main-color: #06c;  
  5.       --accent-color: #999;
  6.     }
  7.     h1 { 
  8.       color: var(--main-color);
  9.     }
  10.     p { 
  11.       color: var(--accent-color);
  12.     }
  13. </style>
  14.   <body>
  15.     <h1>标题<h1>
  16.     <p>正文</p>
  17.   </body>
  18. </html>

替换CSS变量

  • 替换css变量为红色

    1. :root { 
    2.    --main-color: #06c;  
    3. }
    4. h1 { 
    5.           --main-color:red;
    6.     color: var(--main-color);
    7. }

    使用calc()计算

    1. :root { 
    2.   --num:10;
    3.   --size:40px;
    4. }
    5. h1 { 
    6.           font-size: calc(var(--size) * var(--num));
    7. }

    JS 获取/更改 变量的值

    1. getComputedStyle(document.documentElement).getPropertyValue('--main-color') // => #06c
    1. document.documentElement.style.setProperty("--main-color",red);

  • https://www.w3school.com.cn/css/css3_variables_javascript.asp ``` // 获取根元素 var r = document.querySelector(‘:root’);

var rs = getComputedStyle(r); rs.getPropertyValue(‘—theme-color’) r.style.setProperty(‘—theme-color1’, ‘red’);

  1. <a name="n3zrV"></a>
  2. ### CSS全局公共样式适配不同屏幕分辨率
  4. - 媒体查询加载对应的css样式表来实现更换css全局公共变量值

  2. - css1920.css

:root{ —num: 1; / 1920分辨率下，基数必须为 1， / —num1: 1px; —num2: 2px; —num3: 3px; —num4: 4px; —num5: 5px; —num6: 6px; —num7: 7px; —num8: 8px; —num9: 9px; —num10: 10px; —theme-f20:120px!important; }

  2. - css3840.css

:root{ —num: 2; / 3840分辨率下，基数必须为 2 / / 布局宽高 / —num1: 1px; —num2: 2px; —num3: 3px; —num4: 4px; —num5: 5px; —num6: 6px; —num7: 7px; —num8: 8px; —num9: 9px; —num10: 10px; —theme-f20:420px!important; }

  1. <a name="dEbtL"></a>
  2. ### 使用

.tit{ / 经过calc动态计算 / width:calc(var(—num15) * var(—num)); //height: var(—theme-f20); }

  1. <a name="qPmJ5"></a>
  2. ### 监听事件：实现的简单鼠标跟随

```