实现响应式_CSS变量

站长手记作者： 2024-08-27 23:20:01

CSS 变量是 CSS 引入的一个新特性，目前绝大多数浏览器已经支持了，它可以帮助我们用更少的代码写出同样多的样式，大大提高了工作效率，本篇文章将教你如何使用 CSS 变量（css variable）。CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示变量名称

变量声明

:root{
    --red: #f00;
}

div{
    background-color: var(--red);
}

:root{
    --margin-top: 20px;
    --nav-color: #ff0;
    --Nav-color: #fff;
    --transition-duration: .5s;
}

全局变量与局部变量

.left{
    --left-margin: 60px;
    --left-background-color: #333;
}

JavaScript 操作变量

var root = document.querySelector(‘:root‘);     //获取根元素
var rootStyle = getComputedStyle(root);       //获取元素的 css
var red = rootStyle.getPropertyValue(‘--left-margin‘);   //获取 css 的样式值   60px
root.style.setProperty(‘--left-margin‘,‘50px‘);          //更改样式

响应式布局

:root{
    --bg-color: #fff;
    --height: 1080px;
}
body{
    background-color: var(--bg-color);
    height: var(--height);
}
@media all and (max-width:450px) {
    :root{
        --bg-color: #000;
        --height: auto;
    }
}

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_69806.html