本文主要介绍如何开发一个移动端响应式页面。

步骤 1 - 添加 viewport meta 标签

在页头 head 标签内添加 viewport meta 标签是实现响应式页面的第一步,以便优化在移动设备上的展示效果,其推荐的设置为:

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

步骤 2 - 使用 Media Queries

Media Queries 是为指定特性的浏览器视窗应用指定样式的手段,不同的样式代码,相当于为不同的设备应用了不同的 CSS 样式。

参数

属性 介绍

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

用法

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

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

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

样式断点

Media Queries 所使用的查询参数的临界值又可称为「样式断点」。

依据目标设备的分辨率,制定一套合适的样式断点,并为不同的断点定制必要的 CSS 样式。 移动端优先的页面,可使用 min-width 查询参数从小到大来定义断点。常见的样式断点:

属性 说明

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

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

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

步骤 3 - 使用 Viewport 单位及 rem

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

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

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

  • 利用 Sass 函数将设计稿元素尺寸的像素单位转换为 vw 单位
// iPhone 6尺寸作为设计稿基准
$vw_base: 375;
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}
  • 无论是文本字号大小还是布局高宽、间距、留白等都使用 vw 作为 CSS 单位
.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);
            }
        }
    }
}
  • 1 物理像素线(也就是普通屏幕下 1px ,高清屏幕下 0.5px 的情况)采用 transform 属性 scale 实现
.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%;
        }
    }
    ...
}
  • 对于需要保持高宽比的图,应改用 padding-top 实现
.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 的大屏显示器上的糟糕样子。

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

  1. 给根元素的字体大小设置随着视窗变化而变化的 vw 单位,这样就可以实现动态改变其大小
  2. 其他元素的文本字号大小、布局高宽、间距、留白都使用 rem 单位
  3. 限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度,实现布局宽度的最大最小限制…

核心代码实现如下:

// 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 6 的分辨率(宽为 750 px)作为基准分辨率来出设计稿。