CSS 变量让你轻松制作响应式网页
2018-03-07 00:00
483 查看
(点击上方公众号,可快速关注)英文:Per Harald Borgen 译文:白吟灵https://segmentfault.com/a/1190000013512723
摘要:这是一篇2018年制作响应性网页的快速教程。如果你之前没有听说过CSS变量,那么现在我将告诉你:它是CSS的新特性,让你能够在样式表中使用变量的能力,并且无需任何配置。实际上,CSS变量能够让你改变以往设置样式的老方法:
而使用了CSS变量之后:
这样的词法有点奇怪,但它确实能够让你通过仅改变
![](https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0dgAgUGmP1DRKSVb3BmgIibB9kTnG5bqDZZ80H8OlmPOXTRel2cxbEwxpDKe8GUxNIY1Ie3uialhcjw/640?wx_fmt=png)
这个页面在PC端看上去很不错,不过你可以看到它在移动端的表现并不好。就像下面这样:
![](https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0dgAgUGmP1DRKSVb3BmgIibB9nzX7HgW3zWKNia3GVMZz9xicBRlgTKhjVg8MtqMd3cw5dsQNiaDzOTSg/640?wx_fmt=png)
在下面这张图中,我们在样式上做了一些改进,让它看起来更好一点:重新排列整个网格布局,使用垂直排列取代固定两列布局。
将框架整体上移了一点。
对字体进行了缩放。
![](https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0dgAgUGmP1DRKSVb3BmgIibB8y5TMtxqXBfnFvbBQbiak04Ficw1VkSo8FtKibHbrJaeWlH5SEutwQ39g/640?wx_fmt=png)
目光转到CSS代码中,下面是我们要修改的代码:
更具体地说,我们需要在一个媒体查询中做出以下调整:将h1的字体调整为20px;
减少#navbar的上外边距为15px;
将#navbar的字体大小减少到20px;
减少.grid的外边距为15px;
将.grid从两列布局变为单列布局。
注意:样式表里不仅仅是这些CSS声明,但是在这篇教程中我跳过它们,因为媒体查询并不影响它们的设置。你可以在这里获取完整的代码。
然后,我们只需要在app中使用它们就可以了。非常简单:
之后,我们可以在媒体查询中修改这些变量值:
这样的代码是不是比之前要简洁多了?我们只需要专注于
觉得本文对你有帮助?请分享给更多人关注「前端大全」,提升前端技能
摘要:这是一篇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看我的视频课程(https://scrimba.com/g/gcssvariables),或是阅读我在Medium上写的文章:如何学习CSS变量(https://medium.freecodecamp.org/want-to-learn-css-variables-heres-my-free-8-part-course-f2ff452e5140)。好了,现在让我们看看如何使用这个新知识来更加简单地制作响应式站点吧。
初始配置
让我们来把下面这个页面变成响应式的吧:这个页面在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变量大师。
觉得本文对你有帮助?请分享给更多人关注「前端大全」,提升前端技能
相关文章推荐
- CSS 变量让你轻松制作响应式网页
- 如何用一行CSS制作响应式HTML网页
- DIV+CSS 制作网页的15个经验总结
- 用MenuMachine轻松制作漂亮的网页菜单
- div+css网页制作
- 网页制作中DIV和CSS是什么关系
- 网页制作中十个最好的CSS hacks
- 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:
- 学习网页制作中如何在正确选取和使用 CSS 单位
- 1120练习,CSS制作网页
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- DIV+CSS制作网页之如何设置z-index position:relative
- 用div+css制作网页界面
- 分享一个纯css制作的动画化,在网页(手机)加载等的时候可以引用!
- 25条CSS制作网页编写的提醒及小技巧整理
- 网页制作:10个常见DIV+CSS错误总结
- HTML、CSS、JavaScript网页制作笔记
- div+css 制作网页
- 网页制作知识:div+css 面试题目
- 网页制作学习:用CSS创建三栏页布局