揭秘响应式web设计

 0.引言

响应式web设计的作用主要使网页能在不同小大的显示窗口下依然优雅。当前的显示窗口有pc，ipad，iphone以及一些其他的设备。不同的显示窗口的分辨率各不相同，如何在不同的分辨率的情况下使网页依然显示良好呢？

1．流式布局

应对不同窗口大小的最简单的方案就是做一个等比缩放布局。根据不同的窗口大小实现不同的缩放比例。创建等比缩放布局相对简单，就是通过设置显示栏的宽度值为百分比而非固定的像素值。注意点：边框不接受百分比作为单位，但是边框会增加元素的宽度，在页面缩小的过程中可能会出现破坏页面布局的情况。CSS3的解决方案1：:设置box-sizing: border-box,这边元素的边框就会位于盒子的内侧，不会增加盒子的宽度；2：使用calc()函数，动态设置width的值，如calc(62%-5px);

1.1 流式图片

图片占用的空间取决于图像有多少像素组成，在窗口变化的情况下，图片可能会出现显示不全，或者破坏页面布局的情况。解决的方案是设置图片的max-width：100%。这样图片就会根据当前窗口的大小进行缩放。

1.2文字内容

%和em的结果相同都会使文字相对于默认的文字大小缩放。em是相对其父级元素的字体大小，如父级元素的字体大小为1.2em,子元素的font-size:2em，此时子元素的大小实际上是1.2*2=2.4em。当前元素的其他值设置x em单位，其实际大小为当前元素的font-size的大小乘x。CSS3引进了rem (rootem)，使rem单位的大小仅相对于根元素HTML的大小。

2.移动优先设计

流式布局的页面通过缩放在移动端依然不能显示友好，如在pc端的多栏在移动端依然显示多栏，则显得过于拥挤。这时就得考虑移动优先布局或者在移动端和pc端分别使用不同的布局文件。媒体查询主要是根据不同的窗口使用不同的样式。

@media(条件值){CSS样式}

浏览器会自动判断条件值，当条件值为真时，才会渲染{CSS样式}。

<link  rel = ‘stylesheet’  media =’(max-width:568px)’  href = ‘*.css’>根据媒体查询选择样式文件。

2.1 移动端布局

<meta  name = ‘viewport’  content = ‘initial-scale=1.0’>

<meta  name = ‘viewport’ content =’width=device-width’>

这两条设置结果相同都是告诉移动端浏览器不要对页面进行默认的缩放。但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度准。所以，最完美的写法应该是，两者都写上去，这样就initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。

<meta name=’viewport’  content=’width=device-width, initial-scale=1.0’>

viewport是有apple提出来的用于移动端自动缩放页面的技术，目的是使pc端的网页能完整地显示在移动浏览器端。