实现响应式_CSS变量

更新日期: 2019-03-21阅读: 2.4k标签: 响应式

css 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable)。

CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示变量名称


变量声明

使用 :root 来声明 css 变量,root 相当于根元素 html,例如声明一个背景颜色为红色的 red 变量,示例如下

:root{
   --red: #f00;
}

如何应用这个变量呢?使用 var() 函数

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

这样,我们就给一个 div 盒子添加了一个属性,即设置它的背景颜色为红色。当然也可以同时定义多个变量,方便使用,注意:变量名对大小写敏感,nav-color 和 Nav-color 是完全不同的变量。

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


全局变量与局部变量

前面我们在 :root里声明的变量都属于全局变量,也就是可以在 html 包裹下的任一class,id 都可以使用它;除此之外也可以定义局部变量,例如我们在 class 为 left 的 div 下定义局部变量:

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

这个时候,--left-margin 和 --left-background-color 就只能在 .left 包含下的容器才能使用这两个属性,同样是使用margin:var(--left-margin);来书写。


JavaScript 操作变量

JavaScript 可以操纵 css 变量,例如在 index.js 文件中有如下代码:

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;
   }
}

上面的代码表示正常宽度下的 body 背景颜色为白色,高度为 1080 像素,而当宽度为 450px 大小的时候,此时 body 的背景颜色就变为了黑色,高度也变成自适应,只需要更改变量的值就可以实现响应,是不是很方便呢?


链接: https://www.fly63.com/article/detial/2462

移动端web app要使用rem实现自适应布局:font-size的响应式

rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。

使用现代CSS的响应式版面

通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小.为字体大小使用百分比.给文本内容和媒体查询使用em,针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小,使用媒体查询或者media()函数基于视口来改变比例和基础字号

web响应式图片的5种实现

在目前的前端开发中,我们经常需要进行响应式的网站开发。本文着重介绍一下弹性图片,也就是响应式图片的解决方案:js或服务端、srcset 、sizes 、picture标签、svg图片

HTML5+CSS3响应式垂直时间轴,高端,大气

HTML5+CSS3响应式垂直时间轴,使用了HTML5标签<section>,时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中,多个DIV形成一个序列,并把这些DIV放在<section>中。

vue响应式原理及依赖收集

Vue通过设定对象属性的setter/getter方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

vue响应式系统--observe、watcher、dep

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身

Responsive Web Design 响应式网页设计

常见的布局方案:固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸

响应式布局的实现

响应式布局,即 Responsive design,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式布局的关键不仅仅在于布局

深入响应式原理

说到响应式原理其实就是双向绑定的实现,说到 双向绑定 其实有两个操作,数据变化修改dom,input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom;2. 通过表单修改value -> 修改数据

媒体类型和响应式设计

常用的三种为:all,print和screen;媒体类型引用方法:link标签,xml方式,@import和css3新增的@media四种

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!