前言
响应式布局指的是同一页面在不同的屏幕尺寸下游不同的布局,传统的开发方式是PC端开发一套,手机端开发一套,而使用响应式开发布局只要开发一套代码就够了,缺点就是CSS 比较重。
响应式布局表现:
响应式布局优缺点:
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计方案, 多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
别急,在谈及实现之前,我们需要了解一些前置知识,比如像素。
像素
什么是像素?
像素是图像中最小的单位,一个不可再分割的点,对应到物理设备上(比如计算机屏幕),就是屏幕上的一个光点。我们常说的分辨率就是长和宽上像素点的个数,比如 IPhone X 的分辨率是 1125×2436,代表屏幕横向和纵向分别有 1125 和 2436 个像素点,这里的像素是设备像素(Device Pixels)。
1 css px = 3 * 3 device px // IPhone X 中,1 个 CSS 像素对应 3*3 的 9 个设备像素点
而上面这个比值 3 就是设备像素比(Device Pixel Ratio,简称 DPR)。
DPR 可以在浏览器中通过 JavaScript 代码获取,
window.devicePixelRatio // IPhone X 中等于 3,IPhone 6/7/8 中等于 2,Web 网页为 1
像素是一个固定单位,一般我们不会使用固定像素来做响应式布局,但是你需要了解他。相反,响应式布局里经常会用到相对单位,比如 EM。
EM
EM 相对于元素自身的 font-size
,
p {
font-size: 16px;
padding: 1em; /* 1em = 16px */
}
如果元素没有显式地设置 font-size
,那么 1em
等于多少呢?
这个问题其实跟咱说的 em
没啥关系,这里跟 font-size
的计算规则相关,回顾一下。如果元素没有设置 font-size
,会继承父元素的 font-size
,如果父元素也没有,会沿着 DOM 树一直向上查找,直到根元素 html
,根元素的默认字体大小为 16px。
理解了 EM
,REM
就很简单了。
REM
REM = Root EM,顾名思义就是相对于根元素的 EM。所以它的计算规则比较简单,
1 rem
就等于根元素 html
的字体大小,
html {
font-size: 14px;
}
p {
font-size: 1rem; /* 1rem = 14px */
}
所以,如果我们改变根元素的字体大小,页面上所有使用 rem
的元素都会被重绘。
EM 和 REM 都是相对单位,我们在做响应式布局的时候应该如何选择呢?
根据两者的特性,
-
EM 更适合模块化的页面元素,比如 Web Components
-
REM 则更加方便,只需要设置
html
的字体大小,所以 REM 的使用更加广泛一些
实际开发中,设计图的单位是 CSS 像素,我们可以借助一些工具将 px 自动转换为 rem,
下面是一个用 PostCSS
插件在基于 Webpack 构建的项目中自动转换的例子,
var px2rem = require('postcss-px2rem'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function() { return [px2rem({remUnit: 75})]; } }
vw,vh,百分比
浏览器对于 vw
和 vh
的支持相对较晚,在 Android 4.4 以下的浏览器中可能没办法使用,下面是来自 Can I use 完整的兼容性统计数据,
响应式设计里,vw
和 vh
常被用于布局,因为它们是相对于视口的,
-
vw,viewport width,视口宽度,所以 1vw = 1% 视口宽度
-
vh,viewport height,视口高度,所以 1vh = 1% 视口高度
以 IPhone X 为例,vw 和 CSS 像素的换算如下,
<!-- 假设我们设置视口为完美视口,这时视口宽度就等于设备宽度,CSS 像素为 375px -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
width: 10vw; /* 10vw = 1% * 10 * 375px = 37.5px */
}
</style>
我们说百分比也可以用来设置元素的宽高,它和 vw
,vh
的区别是什么?
这里只需要记住一点,百分比是相对于父元素的宽度和高度计算的。
到这里,相信你已经掌握了响应式布局里常用的所有单位。接下来,我们介绍弹性盒和栅格,它们都不是单位,而是一种新的布局方案。
响应式布局的实现方案
1. 媒体查询
css3 媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
如何选择屏幕大小的分割点,也是我们在开发中会遇到的问题, 一般情况下如果我们选择 600px, 900px, 1200px, 1800px 作为分割点,可以适配到常见的14个机型;经典的响应式布局框架: Bootstrap.
移动优先or PC优先
不管是移动优先还是PC优先,都是一句当随着屏幕宽度增大或减小的时候,后面的样式会覆盖前面的样式,因此,移动端优先使用的是 min-width; PC 端优先使用的是 max-width
移动端:
PC 优先: