响应式网页设计- 移动、ipad端开发总结

响应式Web设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

1、特殊的meta 标签

现在我们用的智能手机（iOS，Android）的浏览器都是基于webkit内核，由于webkit的浏览器对于html5的支持比较好，所以我们在声明头部的时候最好用html5的声明方式。<meta>标签中可以设置具体的宽度（如像素值）或者缩放比例如2.0（设备实际尺寸的两倍）。

<meta name=”viewport” content=”initial-scale=2.0,width=device-width” />

注：将页面放大到设备实际尺寸两倍显示的meta标签，一般设置1.0

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />

注：user-scalable=no可以通过meta标签设置禁止用户缩放页面，user-scalable=yes代表允许

<meta content=“email=no” name=“format-detection” />

注：告诉设备不要将页面中的数字识别为电话号码

2、媒体查询

媒体查询就是判断媒介(对象)类型来实现不同的展现形式，让不同的css作用于不同的媒介类型。

下面列举用不同的媒介类型引用不同的css样式

方式1：

@media screen and (max-width:900px){

body{ background:#666;}

}

注：当设备的视口宽度小于900px时候，设置body的背景色为#666

@media screen and (max-width:900px) and (min-width:400px){

body{ background:#666;}

}

注：当设备的视口宽度在400px-900px之间时候，设置body的背景色为#666

方式2：

<link rel=”stylesheet” media=”screen and (max-width:500px) and (min-width:100px)” href=”one.css”>

注：当设备的视口宽度在100px-500px之间时候，调用one.css

<link rel=”stylesheet” media=”screen and (max-width:900px) and (min-width:500px)” href=”two.css”>

注：当设备的视口宽度在500px-900px之间时候，调用two.css

方式3：

@import url(“phone.css”) screen and (max-width:900px);

注：当设备的视口宽度小于900px时，引用phone.css

创建媒体查询时，最常用的是设备的视口宽度（width）和屏幕宽度（device-width）,常用的还有：

width：视口宽度。

height：视口高度。

device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。

device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。

orientation：检查设备处于横向还是纵向。

3、关于调试响应式网页布局

以下2种方式可以方便快速调试响应式网页布局：

方式1：拖动浏览器窗口大小宽度或者高度

方式2：Dreamweaver 多屏预览功能

4、字体大小单位

响应式web设计一般用em作为字体的单位，em是相对单位，em相对的基准点就是浏览器的字体大小，用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题。

注：浏览器默认字体为16px，?0?21em = 16px

5、使用css3

由于webkit的浏览器对于html5的支持比较好，所以我们尽可能的用css3去实现圆角、阴影之类的特效…

当我们想要一个元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，怎么办？

这个时候，css3的box-sizing就派上用场了…

运用以上5点，可以很轻松的让页面自适应不同的设备屏幕宽度。

6、拥抱流式布局

如果针对已知的特定访问设备，可以单独使用媒体查询来制作理想的设计效果，我们已经见过专门适配iPad有多简单。

但是这种策略有严重的缺陷，换句话说，它不能适应未来的变化。目前的情形是，页面捕捉到媒体查询设置的断点，然后布局发生变化。但在捕捉到下一个视口断点之前，页面静止不变。我们需要比这更好的策略。

针对各种视口的排列组合编写对应的CSS样式，无法兼容未来可能出现的设备；而一个完美的设计，往往能在一定程度上适应未来的发展。在这点上我们目前的解决方案尚不完备。

目前的效果更像是一个自适应设计，而不是我们想要的真正的响应式设计。我们的设计应该在突变之前保持灵动。要做到这点，需要将呆板的固定布局修改成灵活的流动百分比布局。

7、百分比布局

为什么用百分比布局？

当某个视口处于媒体查询设置的固定宽度范围之外（可能是某种未知的未来设备及视口），网页就需要水平滚动才能完整浏览。不过我们想要的是一个灵活的设计，能在所有视口中都完美显示，而不仅仅只针对媒体查询设定的一些固定视口。

固定宽度布局转换为百分比布局公式：

box宽度的值 / 元素父层宽度 = 百分比宽度值

比如：可视区域宽度为980px; 里边一个box的宽度为：900px

首先我们要设置一个百分比可视区域 = 原来的固定宽度，这个值用比如98%?0?2 ?0?260%?0?2 ?0?280%等，相对窗口，哪个百分比宽度更适合美观，就设置总宽度为百分比多少。

我们要得到box的宽度百分比值就是：box宽度的值（900） / box 父层（980px）=?0?2?0?20.918367

所以里边一个box的宽度百分比就要设置为 91.8367%

百分比图片

图片设置百分比可以实现图片随着流动布局相应缩放。

为了不让图片缩放过大造成失真效果，我们可以给图片追加max-width = 图片宽度PX属性。

未经允许不得转载：爱前端网 » 响应式网页设计- 移动、ipad端开发总结