Web页响应式设计的一些解决方案

响应式设计简介

前言

最近开发过程中许多同事都来问我关于不同分辨率的电脑访问的Web页面出现挤压、变形、重叠、错位等各种自适应问题。本来我们主要是做PC端，但是随着移动互联网的到来，用户对我们的网站提出了更高的要求，我们的网站不仅需要满足不同电脑端客户的浏览需求，还需要考虑到用户通过移动手机、平板电脑以及各种不长见的异形屏幕设备来访问我们的网站。此时我们的网站就需要适应对平台的用户访问，所以我们需要的不是一个普通网站，我们需要一个响应式的网站。当然，关于自适应方案，百度一搜就会有一大堆结果，但是这里我个人总结了一些适应新互联网环境下的响应式网站解决方案，希望对你有所帮助。

响应式与自适应的区别

可能许多同仁都混淆了响应式和自适应的概念。先给大家体验一下响应式和自适应的区别，请放大缩小一下屏幕尝试

自适应的体验：http://m.ctrip.com/html5/
响应式的体验： http://segmentfault.com/

响应式定义：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。
自适应定义：自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。

响应式设计的优缺点

优点：

1. 响应式网页的兼容性高
2. 用户体验佳
3. 利于SEO优化
4. 开发成本投入低
5. 节约时间成本提高转换率

缺点：

1. 响应式设计对于IE6,7,8浏览器简直是悲剧
2. 响应式设计仅是改善移动体验并没达到最优化
3. 响应式网站无法区分移动端，浪费带宽，加载耗时长

响应式布局的一些技术点：

下面代码示例中的一段公共代码：

<div class="rwd-header">Header</div>
<div class="rwd-content">
  <div class="rwd-content-left">Left</div>
  <div class="rwd-content-body">
    <div class="rwd-content-bodyTop">Top Content</div>
    <div class="rwd-content-bodyBottom">Bottom Content</div>
  </div>
  <div class="rwd-content-right">Right</div>
</div>
<div class="rwd-footer">Footer</div>

源码下载

1、允许网页的宽度自动的调整。

首先，< meta >标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。简单的理解，视窗viewport就是是严格等于浏览器的窗口。在网页代码的头部，我们加入一行元标签来定义视窗宽度。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes">

viewport是网页默认的宽度和高度，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

2、百分比宽度布局

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

width: 50%;
width:auto;

凡是需要指定像素宽度的地方都可以通过指定百分比宽度来替代，同时还可以配合css的cal，进行计算宽度，所以我们提倡尽量少使用绝对宽度。

3、相对大小单位

 body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　	   }

1. px

px相对于像素点的绝对大小的单位。字体最好不要使用绝对大小（px）写死，如果要使用px,也尽量使用偶数，当然奇数也可以，但是不要使用小数，因为小数可能会导致字体渲染不均匀出现字体模糊失真的情况。

2. em（font size of the element）

em是指相对于父元素的字体大小的单位。计算规则是依赖于父元素，如当前对象行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

3. rem（font size of the root element）

rem是指相对于根元素的字体大小的单位。计算规则是依赖于根元素。

4、流动布局 float:left|right

相信float也是大家最常用的布局方式之一，但是设置了float的元素都会脱离文档流，各个区块的位置都是浮动的，不是固定不变的。

.rwd-content-left,
.rwd-content-body,
.rwd-content-right {
  float: left;
}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

.rwd-content::after {
  content: "";
  clear: both;
  display: block;
}

注意：使用浮动过后，需要清除浮动，否则会影响后面的非浮动元素。

5、栅格化布局Bootstrap

采用bootstrap的的网格系统来进行页面布局划分。要实现自己想要的页面效果就需要结合百分比和div嵌套来实现

6、弹性布局flexbox

6、选择加载css

自动探测屏幕宽度，然后加载相应的CSS文件。

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

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
除了用html标签加载CSS文件，还可以使用Less在现有CSS文件中加载。

@import  url("tinyScreen.css") screen and (max-device-width: 400px);

7、媒体查询@media

通过@media可以针对不同的屏幕尺寸设置不同的样式

@media only screen and (max-width: 1024px) {
  .rwd-content-left {
    width: 30%;
  }
  .rwd-content-body {
    width: 70%;
  }
  .rwd-content-right {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  [class*="rwd-content-"] {
    width: 100%;
  }
}

@media做的事完全可以用javascript代替，用js添加一个class或者直接用js修改css属性。优点是浏览器全兼容，缺点就是用js性能不如css。

8、图片的自适应

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者可以使用Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {
　　　　var imgs = document.getElementById("content").getElementsByTagName("img");
　　　　imgSizer.collate(imgs);
　　});

不过最好还是根据不同大小的屏幕，加载不同分辨率的图片