[翻译]CSS变量让你轻松制作响应式网页
原文地址:https://medium.freecodecamp.org/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f
作者:Per Harald Borgen
摘要:这是一篇2018年制作响应性网页的快速教程。
如果你之前没有听说过CSS变量,那么现在我将告诉你:它是CSS的新特性,让你能够在样式表中使用变量的能力,并且无需任何配置。
实际上,CSS变量能够让你改变以往设置样式的老方法:
h1{font-size:30px;
}
navbar > a {font-size:30px;
}
而使用了CSS变量之后:
:root {--base-font-size: 30px;
}
h1 {font-size: var(--base-font-size);
}
navbar > a {font-size: var(--base-font-size);
}
这样的词法有点奇怪,但它确实能够让你通过仅改变--base-font-size
的值来改变app中所有原生的字体大小。
如果你想要学习CSS变量的知识,可以登录Scrimba看我的视频课程,或是阅读我在Medium上写的文章:如何学习CSS变量。
好了,现在让我们看看如何使用这个新知识来更加简单地制作响应式站点吧。
初始配置
让我们来把下面这个页面变成响应式的吧:
这个页面在PC端看上去很不错,不过你可以看到它在移动端的表现并不好。就像下面这样:
在下面这张图中,我们在样式上做了一些改进,让它看起来更好一点:
- 重新排列整个网格布局,使用垂直排列取代固定两列布局。
- 将框架整体上移了一点。
- 对字体进行了缩放。
目光转到CSS代码中,下面是我们要修改的代码:
h1 {font-size: 30px;
}
#navbar {margin: 30px 0;
}
#navbar a {font-size: 30px;
}
.grid {margin: 30px 0;grid-template-columns: 200px 200px;
}
更具体地说,我们需要在一个媒体查询中做出以下调整:
- 将h1的字体调整为20px;
- 减少#navbar的上外边距为15px;
- 将#navbar的字体大小减少到20px;
- 减少.grid的外边距为15px;
- 将.grid从两列布局变为单列布局。
注意:样式表里不仅仅是这些CSS声明,但是在这篇教程中我跳过它们,因为媒体查询并不影响它们的设置。你可以在这里获取完整的代码。
旧方法
不使用CSS变量确实可以做到同样的效果,但这样会增加许多不必要的代码,因为上面大部分修改都需要将声明在媒体查询中重写一遍。就像下面这样:
@media all and (max-width: 450px) {navbar {margin: 15px 0;}navbar a {font-size: 20px;}h1 {font-size: 20px;}.grid {margin: 15px 0;grid-template-columns: 200px;}
}
新的方法
现在让我们看看使用CSS变量是如何起作用的。首先,我们要声明需要更改或复用的变量:
:root {--base-font-size: 30px;--columns: 200px 200px;--base-margin: 30px;
}
然后,我们只需要在app中使用它们就可以了。非常简单:
#navbar {margin: var(--base-margin) 0;
}
#navbar a {font-size: var(--base-font-size);
}
h1 {font-size: var(--base-font-size);
}
.grid {margin: var(--base-margin) 0;grid-template-columns: var(--columns);
}
之后,我们可以在媒体查询中修改这些变量值:
@media all and (max-width: 450px) {:root {--columns: 200px;--base-margin: 15px;--base-font-size: 20px;
}
这样的代码是不是比之前要简洁多了?我们只需要专注于:root
选择器就可以了。
我们将媒体查询中的4个声明减少到了1个,代码也从13行减少到了4行。
当然,这只是一个简单的例子。想象一下,在一个大中型网站中,有一个--base-margin
变量控制着所有的外边距。当你想要在媒体查询时修改属性,并不需要用复杂的声明填充整个媒体查询,只是简简单单地修改这个变量值就可以了。
总之,CSS变量可以定义为未来的响应式。如果你想要学习更多的知识,我推荐你看我的免费教程。用不了多久你就能成为一个CSS变量大师。
查看更多我翻译的Medium文章请访问:
项目地址:https://github.com/WhiteYin/translation
[翻译]CSS变量让你轻松制作响应式网页相关推荐
- Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页
目录 问题原因 解决方案 顺便记录一下使用 效果图 HTML CSS 目录 问题原因 两个js文件冲突/没有引入指定的js文件 我们不能同时引入这两个js只能引入其一,同时引入会使得部分功能失效 解决 ...
- 12个最佳的响应式网页设计教程,轻松带你入门!
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
- 12个最佳的响应式网页设计教程,轻松带你入门
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
- 响应式网页设计_响应式网页设计中的常用技术
响应式网页设计 在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验.和控制 ...
- 响应式网页设计_响应式网页设计:我们从这里去哪里?
响应式网页设计 This article is part of a web development series from Microsoft. Thank you for supporting th ...
- 响应式网页设计_响应式网页设计的意义和目的
响应式网页设计 The following is an exclusive extract from our new book, Jump Start Responsive Web Design, 2 ...
- 什么是响应式网页?它包含了哪些要素?_H5响应式网页设计的6个优势
当今的网络时代,人们可以通过不同的设备进入网络中,但是这些设备又有着特定的屏幕尺寸.分辨率等,在这样的情况下,设计制作响应式的网页成为了客户的最佳选择,毕竟响应式网页具有流动性以及适应屏幕大小的能力, ...
- 响应式布局html像素值计算,CSS Calc():制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
- html如何制作响应式网站,使用HTML和CSS构建响应式网站布局
大多数现代网站使用响应式网页设计,现在您必须考虑实际反应的意义,响应式网站可以适应不同的屏幕尺寸,并可以相应地调整其设计和布局. 在本教程中,我们将学习如何使用HTML和CSS进行响应式网站设计,但首 ...
- HTML CSS 制作响应式价格表单展示id1075-网页前端设计
HTML & CSS 制作响应式价格表单展示id1075-网页前端设计 源码下载地址 在新演示地址 html <a class="maxbutton-3 maxbutton&q ...
最新文章
- input不管用 vue_Vue自定义指令实现快速读取Excel
- 网管常犯的十个错误-转载
- nginx功能扩展整理
- 开箱即用,Knative 给您极致的容器 Serverless 体验
- Final Cut Pro快捷键
- ASP.Net MVC 在ajax接收controller返回值为Json数据
- @retention注解作用_分分钟带你玩转SpringBoot自定义注解
- 微基准测试 r_在您的构建过程中添加微基准测试
- 机器学习笔记(十九)——最大熵原理和模型定义
- ecdf与ksdensity的区别
- GoldenGate实施参考
- 实验高中计算机,仿真物理实验室高中完整版
- lsb算法 matlab隐藏图片算法,数字图像加密算法之空域LSB
- Word中如何修改脚注的编号方式
- auto.js 基于控件的操作
- 批量转换经纬度的网页实现方法
- ThinkPHP实现定时执行任务的两种方法
- 二进制优化(数独问题+有向图问题)
- USB3.0之高速视频传输测试 双目相机(mt9p031、mt9m001)带宽高达300M测试 配合isensor测试 500万像素15fps...
- 美国计算机工程专业,2018年美国大学本科计算机工程专业Top10