响应式页面开发

发表于 | 更新于 | 分类于

响应式页面开发

响应式页面开发的能力可以定义为：

利用一套代码实现页面的布局和排版以适配不同分辨率的设备

响应式页面开发要解决达到两个问题：

  • 为不同特性(如横屏还是竖屏等)的浏览器视窗使用不同的样式代码
  • 让页面元素的尺寸能够依据浏览器视窗尺寸变化而平滑变化

如下图一个经典的移动端响应式页面：


我们分三个步骤来实现这么个响应式页面

步骤 1 - 添加viewport meta 标签

在页头 head 标签内添加 viewport meta 标签是实现响应式页面的第一步。

viewport meta 标签源于Apple公司，用来定义IOS Safari 浏览器展示网页内容的可视范围及缩放比率。它虽然没有成为W3C标准，但是被其他绝大多数的移动端浏览器所支持（目前已知IE Mobile 10 不支持）。W3C尝试将 viewport meta 标签的功能进行标准化并通过CSS的 @viewport 规则来实现同样的功能，但这个标准目前还在草案中，兼容性也没有 viewport meta 标签好。

PageSpeed 准则

Google 网页性能分析工具 PageSpeed Insights 的其中一条准则就是：

网页应在 head 标签内添加 viewport meta 标签，以便优化在移动设备上的展示效果，其推荐的设置为：

1
<meta name="viewport" content="width=device-width, initial-scale=1">

步骤 2 - 使用 Media Queries

Media Queries 是为指定特性的浏览器视窗应用指定样式的手段，可以看成是CSS样式的过滤器或拦截器，通常情况下他可以通过[@media规则]结合[6个查询参数]来拦截设备的浏览器特性（如显示类型、视窗高度、视窗宽度、横竖屏等），藉此可以为不同的特性应用不同的样式代码（相当于为不同的设备应用了不同的CSS样式）。

6 个参数

  • min-width 当视窗宽度大于或等于指定值时，@media规则下的样式将被应用
  • max-width 当视窗宽度小于或等于指定值时，@media规则下的样式将被应用
  • min-height 当视窗高度大于或等于指定值时，@media 规则下的样式将被应用
  • max-height 当视窗高度小于或等于指定值时，@media 规则下的样式将被应用
  • orientation=portrait
    当视窗高度大于或等于宽度时，@media 规则下的样式将被应用
  • orientation=landscape
    当视窗宽度大于高度时，@media 规则下的样式将被应用

2 种用法

方法 1，使用link标签，根据指定特性引入特定的外部样式文件

1
<link rel="stylesheet" media="(max-width: 640px;)" href="max-640px.css">

方法 2，直接在 style 标签或 样式文件内使用 @media 规则

1
2
3
@media (max-width: 640px) {
  /*当视窗宽度小于或等于 640px 时，这里的样式将生效*/
}

样式断点

Media Queries 所使用的查询参数的临界值又可称为[样式断点]。在响应式页面开发过程中，对于[样式断点]我们需要掌握 2 个重要的技巧：

依据目标设备的分辨率，制定一套合适的样式断点，并为不同的断点定制必要的 CSS 样式。 移动端优先的页面，可使用 min-width 查询参数从小到大来定义断点。 如果我们页面的响应式设计要涵盖从手机到高清大屏幕，什么样的「样式断点」比较合理呢？

我们可以从业界一些热门可靠的 CSS 框架中寻找参考答案，例如 Bulma，其采用的「样式断点」有 5 个：

  • mobile 移动设备断点，视窗宽度 ≤ 768 px
  • tablet 平板电脑设备断点，视窗宽度 ≥ 769 px
  • desktop 桌面电脑断点，视窗宽度 ≥ 1024 px
  • widescreen 宽屏电脑断点，视窗宽度 ≥ 1216 px
  • fullhd 高清宽屏电脑断点，视窗宽度 ≥ 1408 px

在实际工作中，「样式断点」的制定需要我们同视觉设计师一起沟通确认，因为视觉设计师可能需要根据不同的断点为页面设计不同的视觉表现。

一个小例子

如果针对 tablet 及以上的设备定制样式，我们就可以这样写了：

1
2
3
4
5
6
@media (min-width: 769px) {
  /* tablet 及以上的设备，页面背景色设置为红色 */
  body {
    background-color: red;
  }
}

步骤 3 - 使用 Viewport 单位及 rem

Media Queries 只解决了「为不同特性的浏览器视窗使用不同的样式代码」的问题，而 Viewport 单位及 rem 的应用，则是为了解决第二个问题：让页面元素的尺寸能够依据浏览器视窗尺寸变化而平滑变化。

方法 1 - 仅使用 vw 作为 CSS 长度单位

在仅使用 vw 单位作为唯一 CSS 单位时，我们需遵守：

  1. 利用 Sass 函数将设计稿元素尺寸的像素单位转换为 vw 单位
1
2
3
4
5
// iPhone 6尺寸作为设计稿基准
$vw_base: 375; 
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}

2.无论是文本字号大小还是布局高宽、间距、留白等都使用 vw 作为 CSS 单位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.mod_nav {
	background-color: #fff;
	&_list {
		display: flex;
        padding: vw(15) vw(10) vw(10); // 内间距
  		&_item {
            flex: 1;
            text-align: center;
            font-size: vw(10); // 字体大小    
            &_logo { 
	            display: block; 
	            margin: 0 auto; 
	            width: vw(40); // 宽度 height: vw(40); // 高度
            	img {
            		display: block;
	                margin: 0 auto;
	                max-width: 100%;
            	}
            }
            &_name {
            	margin-top: vw(2);
            }
        }
    }
}

3 . 1 物理像素线（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情况）采用 transform 属性 scale 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.mod_grid { 
	position: relative; 
	&::after { 
	// 实现1物理像素的下边框线 
		content: ''; 
		position: absolute;
	    z-index: 1;
	    pointer-events: none;
	    background-color: #ddd;
	    height: 1px; 
	    left: 0; right: 0; 
	    top: 0; 
	    @media only screen and (-webkit-min-device-pixel-ratio: 2) { 
		    -webkit-transform: scaleY(0.5); 
		    -webkit-transform-origin: 50% 0%; 
	    } 
}

4 . 对于需要保持高宽比的图，应改用 padding-top 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.mod_banner {
	position: relative;
	// 使用padding-top 实现宽高比为100：750的图片区域
	padding-top: percentage(100/750);
	height: 0;
	overflow: hidden;
	img {
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}
}

由此，我们不需要增加其他任何额外的脚本代码就能够轻易实现一个常见布局的响应式页面，效果如下：

方法 2 - vw 搭配 rem，寻找最优解

方法 1 实现的响应式页面虽然看起来适配得很好，但是你会发现由于它是利用 Viewport 单位实现的布局，依赖于视窗大小而自动缩放，无论视窗过大还是过小，它也随着视窗过大或者过小，失去了最大最小宽度的限制，有时候不一定是我们所期待的展示效果。试想一下一个 750px 宽的设计稿在 1920px 的大屏显示器上的糟糕样子。

当然，你可以不在乎移动端页面在 PC 上的展现效果，但如果有低成本却有效的办法来修复这样的小瑕疵，是真切可以为部分用户提升体验的。

我们可以结合 rem 单位来实现页面的布局。rem 弹性布局的核心在于根据视窗大小变化动态改变根元素的字体大小，那么我们可以通过以下步骤来进行优化：

  1. 给根元素的字体大小设置随着视窗变化而变化的 vw 单位，这样就可以实现动态改变其大小

  2. 其他元素的文本字号大小、布局高宽、间距、留白都使用 rem 单位

  3. 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度，实现布局宽度的最大最小限制

核心代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// rem 单位换算：定为75px只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
	font-size: ($vw_fontsize/ ($vw_design / 2)) * 100vw;
	// 同时，通过Media Queries 限制根元素最大最小值
	@media screen and (max-width: 320px) {
        font-size: 64px;
    }
     @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

小结

在实际工作过程中，考虑到设计以及开发成本，视觉设计师是不大可能为每种不同分辨率的设备分别设计不同的稿子的，拿移动端页面来说，通常会以 iPhone 7 的分辨率（宽为 750 px）作为基准分辨率来出设计稿。