HTML5响应式布局 | 踏浪 - 前端技术分享

什么是响应式网页设计（布局）

响应式网页设计(Responsive Web design，通常缩写为RWD)是指：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

响应式布局的实现

1. Meta标签定义

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

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

隐藏状态栏

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

iPhone会将看起来像是电话号码的数字添加链接，需要关闭

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

2.使用Media Queries适配对应样式

常用于布局的CSS Media Queries

设备类型

all 所有设备；
screen 电脑显示器；
int 打印用纸或打印预览视图；
ndheld 便携设备；
电视机类型的设备；
eech 语意和音频盒成器；
aille 盲人用点字法触觉回馈设备；
bossed 盲文打印机；
ojection 各种投影设备；
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端。
设备特性
width 浏览器宽度；
height 浏览器高度；
device-width 设备屏幕分辨率的宽度值；
device-height 设备屏幕分辨率的高度值；
orientation 浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；
aspect-ratio 比例值，浏览器的纵横比；
device-aspect-ratio 比例值，屏幕的纵横比。

实现响应式布局

通过媒体查询

@media screen and (max-width:320px) { } 
@media screen and (min-width:320px) and (max-width:640px) { }
样式表也可以引入外部的
@import url("css/demo.css") screen and (min-width:320px) and (max-width:640px);
@media screen and (min-width:640px) { }

当然，工作中是使用的外部样式表

<link rel="stylesheet" type="text/css" href="a.css"  media="screen and (min-width: 1000px)">

<link rel="stylesheet" type="text/css" href="b.css"  media="screen and (min-width: 600px) and (max-width: 1000px)">

<link rel="stylesheet" type="text/css" href="c.css"   media="screen and (max-width: 600px)">

也许，你需要让手机的屏幕横着，比如你在玩王者荣耀

竖屏- 屏幕宽度小于高度
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏-屏幕宽度大于高度
<link rel="stylesheet" media="all and (orientation:landscape)" href="portrait.css">

响应式布局缺点和优点

优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。
缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折中性质的设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

这里有一个很严重的缺点

由于PC端和移动终端访问的是同一个网站，PC端可以不计较流量限制，但是移动端不可能不计较。

这里主要是针对于图片的使用，为适配不同终端机型的屏幕宽度和像素密度，我们一般会使用如下方法设置图片的CSS样式：

<style>
    img{
        max-width:100%;
        height:auto;
    }
</style>

将图片的最大宽度设置为100%，以确保图像不会超出其父级元素的宽度，如果父级元素的宽度发生改变，图片的宽度也随之改变，height：auto 可以确保图片的宽度发生改变时，图片的高度会依据自身的宽高比例进行缩放。
这样当我们在移动设备上访问响应式网页里的图片时，只是把图片的分辨率做了缩放，下载的还是PC端的那张大图，这样不仅浪费流量，而且浪费带宽，而且会拖慢网页的打开速度，严重影响用户的使用体验。

解决方案：`<picture>`

如下栗子中针对不同屏幕宽度加载不同的图片；当页面宽度在320px到640px之间时加载minpic.png；当页面宽度大于640px时加载middle.png

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
    <source media="(min-width: 640px)" srcset="img/middle.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

如下例子中添加了屏幕的方向作为条件；当屏幕方向为横屏方向时加载_landscape.png结尾的图片；当屏幕方向为竖屏方向时加载 _portrait.png结尾的图片；

<picture>
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>