前言
响应式Web设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。
1、特殊的meta 标签
现在我们用的智能手机（iOS，Android）的浏览器都是基于webkit内核，由于webkit的浏览器对于html5的支持比较好，所以我们在声明头部的时候最好用html5的声明方式。标签中可以设置具体的宽度（如像素值）或者缩放比例如2.0（设备实际尺寸的两倍）。
|
1 |
<meta name="viewport" content="initial-scale=2.0,width=device-width" /> |
注：将页面放大到设备实际尺寸两倍显示的meta标签，一般设置1.0
|
1 |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> |
注：user-scalable=no可以通过meta标签设置禁止用户缩放页面，user-scalable=yes代表允许
|
1 |
<meta content=“email=no” name=“format-detection” /> |
注：告诉设备不要将页面中的数字识别为电话号码
2、媒体查询
媒体查询就是判断媒介(对象)类型来实现不同的展现形式，让不同的css作用于不同的媒介类型。
下面列举用不同的媒介类型引用不同的css样式
方式1
|
1 2 3 |
@media screen and (max-width:900px){ body{ background:#666;} } |
注：当设备的视口宽度小于900px时候，设置body的背景色为#666
|
1 2 3 |
@media screen and (max-width:900px) and (min-width:400px){ body{ background:#666;} } |
注：当设备的视口宽度在400px-900px之间时候，设置body的背景色为#666
方式2
注：当设备的视口宽度在100px-500px之间时候，调用one.css 注：当设备的视口宽度在500px-900px之间时候，调用two.css
方式3：
|
1 |
@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， 1em = 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% 60% 80%等，相对窗口，哪个百分比宽度更适合美观，就设置总宽度为百分比多少。
我们要得到box的宽度百分比值就是：box宽度的值（900） / box 父层（980px）= 0.918367
所以里边一个box的宽度百分比就要设置为 91.8367%
百分比图片
图片设置百分比可以实现图片随着流动布局相应缩放。
为了不让图片缩放过大造成失真效果，我们可以给图片追加max-width = 图片宽度PX属性
转载自：57剑人网
暂无评论