实现响应式——CSS变量

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);       //获取元素的 cssvar red = rootStyle.getPropertyValue(‘--left-margin‘);   //获取 css 的样式值   60pxroot.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.cnblogs.com/cwxwdm/p/10573966.html

时间: 2024-11-05 18:51:18

实现响应式——CSS变量的相关文章

分享一个最近在使用的响应式css框架 Pure

响应式,就是根据浏览器或不同设备屏幕大小自适应内容. 第一次查响应式呢,了解到是要在head里写判断浏览器宽度之类的东西,也要设置对IE低版本兼容. 如: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><link rel="style

SpaceBase – 基于 Sass 的响应式 CSS 框架

SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件

JS和CSS实现响应式

一.CSS实现响应式 CSS响应式的实现主要依赖于CSS媒体查询: 媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如:width,height,color.CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身.即通过媒体查询判断屏幕宽度,加载不同的CSS样式表 代码如下:注意一定要有一个默认样式表不加媒体查询,否则在IE8中访问时会没有样式表. <head> <meta charset="UTF-8

常用响应式 Web UI 框架

1. Bootstrap Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等.官方网站: http://twitter.github.com/bootstrap/github: https://github.com/twitter/bootstrap 2. Foundation Foundation 是一个易用.强大而且灵活的框架,用于构建基于任何设备上的 W

16个最佳响应式HTML5框架分享

HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分流行.如果你也对HTML5框架感兴趣,你可以看看下面我列出的一些最佳的响应式HTML5框架,帮助你快速开发网站. 1. Twitter Bootstrap 海量技术文章:http://tieba.yunxunmi.com/ 云搜 http://so.yunxunmi.com/ 让搜索更简单 采用ht

十大响应式Web设计框架

http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意一环节都不容忽视.时下,借助网上的一些资源,只需简单的几个步骤你就可创建出更具吸引力的设计,包括菜单.背景.动画.眉头.body等设计.响应式Web设计不仅能够适用于任何屏幕尺寸,还为用户带来更完美的体验,本文将分享十款最佳的响应式Web设计,助你大大简化工作流程. Gumby Framework

响应式框架推荐

HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分流行.如果你也对HTML5框架感兴趣,你可以看看下面我列出的一些最佳的响应式HTML5框架,帮助你快速开发网站. 1. Twitter Bootstrap Bootstrap来自Twitter,是目前最受欢迎的前端框架,它简洁灵活,使得Web开发更加方便快捷.它有着优雅的HTMCSS规范,以及构建响

响应式Web设计(Responsive Web design)

中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 面对不同分辨率设备灵活性强等         页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动

16个最佳响应式HTML5框架

本文由PHP100中文网编译 HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分流行.如果你也对HTML5框架感兴趣,你可以看看下面我列出的一些最佳的响应式HTML5框架,帮助你快速开发网站. 1. Twitter Bootstrap Bootstrap来自Twitter,是目前最受欢迎的前端框架,它简洁灵活,使得Web开发更加方便快捷.它有着优雅