如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。

如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。

实质上,CSS变量允许你跳过设置样式的旧方式:

h1 {
  font-size: 30px;
}
navbar > a {
  font-size: 30px;
}

...更喜欢这种方式:

:root {
  --base-font-size: 30px;
}
h1 {
  font-size: var(--base-font-size);
}
navbar > a {
  font-size: var(--base-font-size);
}

尽管语法看起来可能有些奇怪,但这带来明显的好处是,我们只要修改--base-font-size变量就能够改变整个应用的字体大小。

如果您想正确学习CSS变量,请查看我在Scrimba上免费的交互式CSS变量课程

现在让我们看看这种新技术如何在构建响应式网站时让你变得更轻松。

设置

我们将对一个投资网站添加响应,如图所示:

在桌面上查看时看起来不错。 但是,如下图所示,此布局在移动设备上无法正常工作。

下图是我们更改了一些样式,以让他在移动设备上更好地工作。 

以下是我们所做的:

  1. 重新排列网格,使其垂直堆叠而不是跨两列。
  2. 将整个布局往上移动一点点。
  3. 缩小字体

为了做到这一点,我们需要修改下面的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,即使在这些选择器中也是如此。 但是,为了本教程的缘故,我已经略去了媒体查询中未修改的所有内容。 看看这个Scrimba Playground来获取整个代码。

旧方法

如果没有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;
}

然后,我们在应用中可以很简单的使用这些变量:

#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,而不是所有的选择器。

我们将媒体查询从四个选择器减少到一个,从十三行代码减少到四行。

这只是一个简单的例子。 想象一个完整的网站,例如, 使用--base-margin控制应用四周的空间。相对于在媒体查询里使用复杂的选择器修改值,这个超容易,只需要修改一个值即可。

总而言之,CSS变量绝对是响应式开发的未来。 如果你想一劳永逸地学习这项技术,我建议你查阅我在Scrimba关于这个主题的免费课程

你将很快成为一名CSS变量大师:)

原文:How to make responsiveness super simple with CSS Variables

版权声明:著作权归作者所有。

相关推荐

CSS让绝对定位的元素居中的办法

水平居中,设置left:0,right:0, 垂直居中,设置top:0,bottom:0。margin设置为auto<!DOCTYPE html> <html lang="en"> <head> <title>SO question 2803532</title> <style type="text/css

[译]CSS变量实现酷炫的悬停效果

我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单,但效果是按钮会脱颖而出,并得到点击。我们怎样才能达到类似的效果,让我们的网站脱颖而出呢? 其实,它不像你想象的那么难!跟踪位置我们首先要获取鼠标的位置。document.querySelector('.button').onmousemove 

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它

Shell:如何在awk脚本里使用变量

在awk里用变量最好的方法是使用-v选项。使用方式awk -v var= 单个变量~]$ v1="变量1" ~]$ awk -v var1="$v1" 'BEGIN {print var1}' 变量1 多个变量使用多个-v var=xxx来接收多个变量~]$&

[译]使用JDK 9 Flow API进行响应式编程

什么是响应式编程?响应式编程是关于处理数据项的异步流,也就是应用程序在数据项发生时对其进行响应。 数据流实质上是指随时间发生的数据项序列。与迭代内存数据相比, 这个模型的内存效率更高,因为数据是以流的形式处理的。在响应式编程模型中,有一个Publisher和一个Subscriber。 Publisher发布一个数据流,Subscriber异步订阅。该模型还提供了一种机