H5开发实战二：响应式页面开发｜小册免费学

代码迷途
953 阅读10分钟

响应式页面开发：利用一套代码实现页面的布局和排版以适配不同分辨率的设备。

对于响应式页面，需要做到：在不同特性的浏览器视窗中使用不同的样式；页面元素的尺寸可以根据浏览器视窗尺寸的变化而平滑变化。

响应式页面通常要经过如下几项设置：

viewport meta揭秘和使用

viewport meta标签源于 Apple 公司，用来定义 iOS Safari 浏览器展示网页内容的可视范围及缩放比率。被其他绝大多数的浏览器所支持

使用viewport meta标签控制移动浏览器的布局

viewport机制

浏览器的viewport是web内容可以被看到的窗口区域；通常与被渲染的页面大小不一样，浏览器会为渲染的页面提供滚动条，让用户滚动和访问所有的内容。

在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口)

视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。视口范围内的图像会以剪切的形式，投影到到世界坐标窗口中，完成图像的可视化展示。

在 Web 浏览器中，视口是整个文档的可见部分。如果文档大于视口，则用户可以通过滚动来移动视口。

  • viewport：是可以被看到的窗口区域。

窄屏设备(如移动设备)通常会在比屏幕宽的虚拟窗口或viewport中渲染页面。因此会缩小渲染结果，以便可以一次看到所有内容。用户可以平移或缩放，查看页面的不同区域。

例如，如果移动屏幕的宽度为640像素，则页面可能会以980像素的虚拟视口(virtual viewport)呈现，然后将其缩小以适合640像素的空间。

这样做是因为许多页面没有进行移动优化，并且在以较小的视口宽度呈现时会中断（或至少看起来很差）。这种虚拟视口(virtual viewport)是一种使非移动优化站点在窄屏设备上总体上看起来更好的方法。

  • 浏览器中，对页面进行放大的时候，视口的大小如何变化？

视口会变小。

由于视口变小，呈现的内容就变少，呈现在窗口就是：更少的内容放在同一块物理屏幕上。更少的内容在呈现时会相应的放大以布满屏幕。

浏览器窗口中所浏览内容的放大，是依赖于视口的缩小来实现的。

可以参考下面的动图更好的理解：上面蓝框表示底层画布、红框表示视口，下面表示用户在浏览器窗口中看到的页面。

同理，当向下滚动滚动条查看内容时，是通过视口的下移实现的。

引入viewport meta标签

但是，此机制对于使用了媒体查询(media queries)对窄屏进行了优化的页面并不友好。例如，如果虚拟视口为980px，则永远不会使用640px或480px或更小的媒体查询，从而限制了这种响应式设计技术的效果。

为了缓解此问题，Apple最开始引入了viewport meta tag，而且所有浏览器基本都支持该标签。

Viewport使用

典型的移动优化的站点包含如下内容：

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

width控制视口(viewport)的大小，它可以被设置为特定的像素数，如width=600；或特殊值device-width，这是CSS像素缩放比例为100%的屏幕宽度。

initial-scale属性控制首次加载页面时的缩放级别。maximum-scale, minimum-scale和user-scalable属性控制如何允许用户放大或缩小页面。

一像素不是一像素

CSS2.1规范：

如果输出设备的像素密度(pixel density)与典型的计算机显示器的像素密度非常不同，则用户代理应重新缩放像素值。建议像素单位参考最近似参考像素的设备像素总数。建议参考像素为像素密度为96dpi且与阅读器的距离为一臂的设备上一个像素的视角。

对于web开发来说，这意味着，页面的大小比实际像素数小得多，浏览器可能会相应地调整布局和图像的大小。

默认像素比取决于显示密度(display density)。在密度小于200dpi的显示器上，该比率为1.0。在密度介于200和300dpi之间的显示器上，该比率为1.5。对于密度超过300dpi的显示器，该比率为密度/150dpi整数下限。 请注意，仅当视口比例等于1时，默认比率才为true。否则，CSS像素和设备像素之间的关系取决于当前的缩放级别。

也就是，物理显示器的密度、页面的缩放，决定了一个CSS像素对应多少个物理像素。

使用Media Queries(媒体查询)

Media Queries——媒体查询可以为特定特性的浏览器视窗应用指定的样式。类似CSS样式的过滤器或拦截器。

针对的浏览器特性包括显示类型、视窗高度、视窗宽度、横竖屏等，不同特性使用不同的样式代码，即实现不同设备应用不同的CSS。

  • 6个参数
参数名称参数描述
min-width当视窗宽度大于或等于指定值时，@media 规则下的样式将被应用
max-width当视窗宽度小于或等于指定值时，@media 规则下的样式将被应用
min-height当视窗高度大于或等于指定值时，@media 规则下的样式将被应用
max-height当视窗高度小于或等于指定值时，@media 规则下的样式将被应用
orientation=portrait当视窗高度大于或等于宽度时，@media 规则下的样式将被应用
orientation=landscape当视窗宽度大于高度时，@media 规则下的样式将被应用
  • 2种用法
  1. 使用link标签，根据指定特性引入特定的外部样式文件
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
  1. 直接在style标签或样式文件内使用@media规则
@media (max-width: 640px) {
  /*当视窗宽度小于或等于 640px 时，这里的样式将生效*/
}
  • 样式断点

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

响应式页面开发中，针对「样式断点」：依据目标设备的分辨率，制定一套合适的样式断点，并为不同的断点定制必要的CSS样式；移动端优先的页面，可使用min-width查询参数从小到大来定义断点。

对于响应式设计涵盖从手机到高清大屏幕的页面，样式断点可参考热门权威的CSS框架中的设置：

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

实际工作中，样式断点可能需要和视觉设计师确认沟通，因为不同的断点，可能要设计不同的页面视觉表现。

使用Viewport单位及rem

Media Queries可以解决「为不同特性的浏览器视窗使用不同的样式代码」问题。

Viewport单位及rem，则可以解决：让页面元素的尺寸能够依据浏览器视窗尺寸变化而平滑变化。

Viewport一般翻译为"视口"或"视窗"。

css长度单位

使用vw作为CSS长度单位

如果使用vw单位作为唯一CSS单位，则需要注意：

  1. 利用Sass函数将设计稿元素尺寸的像素单位转换为vw单位
// iPhone 6尺寸作为设计稿基准
$vw_base: 375; 
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}
  1. 无论是文本字号大小还是布局高宽、间距、留白等都使用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. 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%;
        }
    }
    ...
}
  1. 对于需要保持高宽比的图，应改用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; 
    }
}

这样，不增加任何额外的脚本代码，就实现了一个常见布局的响应式页面

桌面版Chrome支持的字体大小默认不能小于12PX，可通过「chrome://settings/ 显示高级设置－网络内容－自定义字体－最小字号（滑到最小）」进行设置。

vw搭配rem使用

上面的布局使用Viewport单位实现，依赖于视窗大小而自动缩放,视窗过大或过小，它也会随着过大或过小，没有最大最小宽度的限制，显示效果可能会"很不好看"。

很简单的应对方法是使用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 7的分辨率（宽为 750 px）作为基准分辨率进行设计

参考

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情

avatar
文章
阅读
粉丝