专栏首页grain先森前端- CSS 变量让你轻松制作响应式网页

前端- CSS 变量让你轻松制作响应式网页

原文:https://medium.freecodecamp.org/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f 作者:Per Harald Borgen(https://medium.freecodecamp.org/@perborgen?source=postheaderlockup)

摘要:这是一篇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端看上去很不错,不过你可以看到它在移动端的表现并不好。就像下面这样:

在下面这张图中,我们在样式上做了一些改进,让它看起来更好一点:

  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声明,但是在这篇教程中我跳过它们,因为媒体查询并不影响它们的设置。你可以在这里获取完整的代码。

旧方法

不使用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变量大师。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css 实现多行文字截断

    看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来实现,一般来说,在做这样文字截断效果时我们更多是希望:

    grain先森
  • 前端-Web Worker使用教程

    JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的...

    grain先森
  • Css 小技巧

    在页面构建中,能明显提升页面显示质量的一些CSS小技巧。很多简洁美观的页面表现,可以使用CSS3代码即可实现,减少图片的使用。

    grain先森
  • rem和em小插曲

    1.对em来说,它的大小是相对于父层font-size来改变,但是如果其自身有font-size属性的话,em会优先考虑自身的font-size;

    用户3159471
  • 移动端的公共样式库

    用户3055976
  • 数据质量是什么

    数据质量是对数据在特定应用场景下服务商业目的适应性的评估/评价。 ? 数据质量包括这些方面: 准确性 完整性 时效性(更新状态) 关联性 一致性 可靠性 合理表...

    陆勤_数据人网
  • 一年坎坷也曾怀疑自己,如今五冠在手的柯洁将再战AI

    柯洁、於之莹任形象大使 中新网客户端北京12月27日电(记者 岳川) 刚刚成为史上最年轻“五冠王”的世界冠军柯洁九段将于明年再战人工智能。柯洁27日表示,弈无止...

    企鹅号小编
  • 如何使用R语言解决可恶的脏数据

    在数据分析过程中最头疼的应该是如何应付脏数据,脏数据的存在将会对后期的建模、挖掘等工作造成严重的错误,所以必须谨慎的处理那些脏数据。 脏数据的存在形式主要有如下...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券