使用现代CSS的响应式版面

更新日期: 2018-02-02阅读: 4.1k标签: 响应式

为一个网站选择类型尺寸是项艰巨的任务. 标题和段落的尺寸在网页布局和可读性方面处理起来很棘手. 谢天谢地, 我们有模块化缩放可以引导我们.

模块化缩放是一个数字序列以某种方式关联另一个序列. Tim Brown,更多版面

在版面中应用的模块化比例实现了视觉层次效果与和谐的比例。它们提供了一组数值作为字体尺寸和间距的方针。


版面中的模块化缩放

在web内容中实施模块化比例需要在css代码的不同位置手动计算数值并对数值手动编码。为了在所有屏幕尺寸情况下都保持平衡比例,你要花费很多心思

我们可以利用CSS新特性简化一个模块化缩放响应式网站的设计工作。我们首先使用传统属性和calc()基于视口大小来动态计算模块化比例的值。然后我们会基于视口尺寸改变比例,并使用媒体查询和media()函数


推荐:PostCSS和cssnext

为了在使用CSS新语法时保证浏览器兼容性,我建议使用PostCSS和cssnext插件。

PostCSS是一个使用JavaScript解析CSS的解析器,它驱动的一系列插件可以转换你的CSS代码。

cssnext是一个PostCSS插件,它可以通过转换语法和函数将CSS规格草案转为兼容性的CSS。

一个最小化的postcss.config.js看起来就是这样:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-cssnext'),
  ],
};

你可在PostCSS 文档中查阅如何使用喜欢的构建工具(webpack,gulp等)来整合PostCSS。


尝试应用一个比例

把定义你的字体和类型比例等传统属性作为开始。使用calc()来计算你选择的比例的不同权重。我们会在下面的例子中使用1.414的比例(在音乐方面这个数字有其特殊含义)。

关于单位的一些准则

我们只会为下面例子中的h1,h2,h3,p标签添加很少样式.假如你使用了全部的标题标签,你可能在应用某比例时要完成更多步骤.

:root {
  /* Font faces */
  --headerFont: 'Helvetica Neue', sans-serif;
  --bodyFont: 'Georgia', serif;
  --fontColor: hsla(0, 0%, 0%, 0.8);
  --lineHeight: 1.5;
  --baseFontSize: 112.5%;  /* 18px */
  /* Type scale */
  --ratio: 1.414;  /* Augmented fourth */
  /* Each step of the scale is a power
     of --ratio
  */
  --stepUp1: calc(1em * var(--ratio));
  --stepUp2: calc(var(--stepUp1) *
                  var(--ratio));
  --stepUp3: calc(var(--stepUp2) *
                  var(--ratio));
  --stepDown1: calc(1em /
                    var(--ratio));
}

当你设置基础字体时可以引用这些变量.

html {
  font-size: var(--baseFontSize);
  color: var(--fontColor);
  line-height: var(--lineHeight);
  font-family: var(--bodyFont);
}

h1,
h2,
h3 {
  margin: var(--stepUp1) 0 0.5em;
  font-family: var(--headerFont);
  line-height: 1.2;
}

h1 {
  font-size: var(--stepUp3);
}

h2 {
  font-size: var(--stepUp2);
}

h3 {
  font-size: var(--stepUp1);
}

small {
  font-size: var(--stepDown1);
}

我们得到如下结果:

请看 Type Scaling using cssnext,作者Steven Loria (@sloria) 发布于CodePen.

结果看起来不错,除非你正在手机上查看...


移动端存在的问题

在大屏情况下缩放表现良好.然而,适合桌面屏幕或笔记本的比例不一定对小屏幕适用.

Jason Pamental解释了原因:

屏幕尺寸减小,可见的元素变得更少,元素的相对比例变得很夸张. Jason Pamental,缩放比例更现代的Web版面

Consequently, we have disproportionately large headings on small screen sizes. 所以,我们在屏幕尺寸更小的情况下设置了更大的标题.


一个为大尺寸屏幕设置的现代比例并不适用于微型设备.


使其具备响应式特性

当视口越小时,能引起视觉注意的元素就越少.因此,我们可以设置更小的基础字号,从而使标题间的对比显得不那么强烈.

在我们的实例中使用了以下的值:

  • 屏幕小于36em:基础字号100%,缩放比例为1.2

  • 屏幕在36em至48em之间:基础字号112.5%,缩放比例为1.2

  • 屏幕大于48em:基础字号112.5%,缩放比例1.414


针对不同的视口使用不同的比例和基础字号.

我们会尝试用两种方式实现效果.首先我们会使用媒体查询.接着我们会使用media()函数让代码更简洁.


使用媒体查询

由于我们有两种缩放比例,我们会编写两套变量:一套对应小尺寸和中等尺寸屏幕,另一套对应大尺寸屏幕.我们同样会定义两套基础字号.

:root {
   /* Base sizes */
  --baseFontSizeSm: 100%; /* 16px */
  --baseFontSizeMd: 112.5%; /* 18px */
  /* Type scale on smaller screens */
  --ratioSm: 1.2;  /* Minor third */
  --stepUp1Sm: calc(1em * var(--ratioSm));
  --stepUp2Sm: calc(var(--stepUp1Sm) *
                    var(--ratioSm));
  --stepUp3Sm: calc(var(--stepUp2Sm) *
                    var(--ratioSm));
  --stepDown1Sm: calc(1em /
                      var(--ratioSm));
  /* Type scale on larger screens */
  --ratioLg: 1.414;  /* Augmented fourth */
  --stepUp1Lg: calc(1em * var(--ratioLg));
  --stepUp2Lg: calc(var(--stepUp1Lg) *
                    var(--ratioLg));
  --stepUp3Lg: calc(var(--stepUp2Lg) *
                    var(--ratioLg));
  --stepDown1Lg: calc(1em /
                      var(--ratioLg));
}

接下来,我们要编写媒体查询中用到的两个断点.

媒体查询需使用em单位,因为在不同浏览器下表现一致.媒体查询:px,em还是rem对这几个单位进行了对比.

我们会把断点定义为 custom media(另一个cssnext特性),这样我们就能通过名字来参考.

cssnext允许你使用">=":

@custom-media --break-md (width >= 36em);
@custom-media --break-lg (width >= 48em);

基础字号在"medium"断点应该增加.

html {
  font-size: var(--baseFontSizeSm);
  color: var(--fontColor);
  line-height: var(--lineHeight);
  font-family: var(--bodyFont);

  @media (--break-md) {
    font-size: var(--baseFontSizeMd);
  }
}

"large"断点处比例应该增加,所以我们参考了媒体查询中的大比例.

h1 {
  font-size: var(--stepUp3Sm);
  @media (--break-lg) {
    font-size: var(--stepUp3Lg);
  }
}

h2 {
  font-size: var(--stepUp2Sm);
  @media (--break-lg) {
    font-size: var(--stepUp2Lg);
  }
}

h3 {
  font-size: var(--stepUp1Sm);
  @media (--break-lg) {
    font-size: var(--stepUp1Lg);
  }
}

small {
  font-size: var(--stepDown1Sm);
  @media (--break-lg) {
    font-size: var(--stepDown1Lg);
  }
}

请看Steven Loria (@sloria)发布于CodePen的例子Responsive modular scale using cssnext.

字体大小随视口大小准确调整.这很棒!

这种方法比手动计算缩放比例更便利,但我们在缩放转折点仍然需要每次至少一个媒体查询.

在下一节我们可以用media()函数让代码更简洁.


使用media()函数

抛弃为每个模块化比例定义彼此分离的变量集,我们改用media()函数(spec)为缩放属性绑定响应式值.

该特性需要额外安装postcss-media-fn插件,用npm或yarn安装并添加到你的postcss.config.js。

npm install postcss-media-fn
// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-cssnext'),
    require('postcss-media-fn'),
  ],
};

当定义你的类型缩放变量时使用media()函数.每次缩放比的变化都包含了对每个断点的类型缩放计算.

缩放的一级看起来是这样:

--stepUp1: media(
  calc(1em * var(--ratioSm)),
  (min-width: 48em) calc(1em * var(--ratioLg))
);

让我们打破这个规则看看.

  • 第一级缩放的默认字号是1em x 1.2(小比例情况下)

  • 超过48em(我们的"large"断点),第一级是1em x 1.414(大比例情况)

以下是使用media()的缩放代码:

:root {
  /* Break points */
  --minMd: 36em;
  --minLg: 48em;

  /* Ratio on smaller screens */
  --ratioSm: 1.2; /* Minor third */

  /* Ratio on larger screens */
  --ratioLg: 1.414; /* Augmented fourth */

  /* Type scale */
  --stepUp1: media(
    calc(1em * var(--ratioSm)),
    (min-width: var(--minLg)) calc(1em * var(--ratioLg))
  );
  --stepUp2: media(
    calc(1em * var(--ratioSm) * var(--ratioSm)),
    (min-width: var(--minLg)) calc(1em * var(--ratioLg) * var(--ratioLg))
  );
  --stepUp3: media(
    calc(1em * var(--ratioSm) * var(--ratioSm) * var(--ratioSm)),
    (min-width: var(--minLg)) calc(1em * var(--ratioLg) * var(--ratioLg) * var(--ratioLg))
  );
  --stepDown1: media(
    calc(1em / var(--ratioSm)),
    (min-width: var(--minLg)) calc(1em / var(--ratioLg))
  );
}

有了这个设置,我们不再需要缩放时编写媒体查询.

h1 {
  font-size: var(--stepUp3);
}

h2 {
  font-size: var(--stepUp2);
}

h3 {
  font-size: var(--stepUp1);
}

small {
  font-size: var(--stepDown1);
}

这个方法需要进一步完善,但它在许多地方都能使你的代码更紧凑.


总结

当你设计基于web的模块化类型缩放时遵守下面这些建议;

  • 通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小

  • 为字体大小使用百分比.给文本内容和媒体查询使用em

  • 针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小

  • 使用媒体查询或者media()函数基于视口来改变比例和基础字号


相关链接

请将你的评价发送到我的email.欢迎你的回馈,建议和批评.

twitter | github | linkedin


原文出处 Responsive Typography Using Modern CSS | stevenloria.com   
翻译来源 使用现代CSS的响应式版面

 

链接: https://www.fly63.com/article/detial/418

移动端web app要使用rem实现自适应布局:font-size的响应式

rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。

web响应式图片的5种实现

在目前的前端开发中,我们经常需要进行响应式的网站开发。本文着重介绍一下弹性图片,也就是响应式图片的解决方案:js或服务端、srcset 、sizes 、picture标签、svg图片

HTML5+CSS3响应式垂直时间轴,高端,大气

HTML5+CSS3响应式垂直时间轴,使用了HTML5标签<section>,时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中,多个DIV形成一个序列,并把这些DIV放在<section>中。

实现响应式_CSS变量

CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable)。CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示变量名称

vue响应式原理及依赖收集

Vue通过设定对象属性的setter/getter方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

vue响应式系统--observe、watcher、dep

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身

Responsive Web Design 响应式网页设计

常见的布局方案:固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸

响应式布局的实现

响应式布局,即 Responsive design,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式布局的关键不仅仅在于布局

深入响应式原理

说到响应式原理其实就是双向绑定的实现,说到 双向绑定 其实有两个操作,数据变化修改dom,input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom;2. 通过表单修改value -> 修改数据

媒体类型和响应式设计

常用的三种为:all,print和screen;媒体类型引用方法:link标签,xml方式,@import和css3新增的@media四种

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!