响应式页面实现

article/2025/10/12 19:08:31

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：

1. 响应式布局
2. 响应式内容（图片、多媒体）

一、响应式布局

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？

柵格布局

那么我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置：
柵格布局

Meta标签定义

使用 viewport meta 标签在手机浏览器上控制布局

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

通过快捷方式打开时全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone会将看起来像电话号码的数字添加电话连接，应当关闭

<meta name="format-detection" content="telephone=no" />

使用 Media Queries 适配对应样式

常用于布局的CSS Media Queries有以下几种

设备类型(media type):

all所有设备
screen 电脑显示器
print打印用纸或打印预览视图
tv电视机类型的设备
speech语意和音频盒成器
braille盲人用点字法触觉回馈设备
embossed盲文打印机
projection各种投影设备
tty使用固定密度字母栅格的媒介，比如电传打字机和终端

设备特性(media feature):

width浏览器宽度
height浏览器高度
device-width设备屏幕分辨率的宽度值
device-height设备屏幕分辨率的高度值
orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape
aspect-ratio比例值，浏览器的纵横比
device-aspect-ratio比例值，屏幕的纵横比

代码示例：

/* for 240 px width screen */
@media only screen and (max-device-width:240px){selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){selector{ ... }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){selector{ ... }
}

二、响应式图片

处理原理：浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。

解决方案：其实W3C已经有一个用于响应式图形的草案：新定义标签<picture>，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。虽然目前不支持，但我们还是来了解下，为之后的内容做个铺垫。

<picture>是一个图形element，内容由多个源图组成，并由CSS Media Queries来适配出合理图形，代码规范如下：

<picture width="500" height="500"><source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x"><source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x"><source srcset="small-1.jpg 1x, small-2.jpg 2x"><img src="small-1.jpg" alt=""><p>Accessible text</p><!-- Fallback content--><noscript><img src="external/imgs/small.jpg" alt="Team photo"></noscript>
</picture>

source: 一个图片源；media: 媒体查询，用于适配屏幕尺寸；srcset: 图片链接，1x适应普通屏，2x适应高清屏；<noscript/>: 当浏览器不支持脚本时的一个替代方案；<img/>: 初始图片；另外还有一个无障碍文本，类似<img/>的alt属性。

<picture>目前还不支持，但它的原理我们是可借鉴的，所以就诞生了一个用于图片响应式处理的类库Picturefill

<span data-picture data-alt="图片描述文本"><span data-src="small.jpg"></span><span data-src="medium.jpg"     data-media="(min-width: 400px)"></span><span data-src="large.jpg"      data-media="(min-width: 800px)"></span><span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span><!-- 浏览器不支持JS时的备用方案. --><noscript><img src="external/imgs/small.jpg" alt="图片描述文本"></noscript>
</span>