响应式设计的思想就是让网页布局、图片和字体自适应窗口大小

响应式设计基础

百分比和em功能相同，让文字相对于浏览器默认的文字大小缩放。

把文字大小设置为110%或1.1em，结果就是比常规没有应用样式的文字打10%。

响应式布局常用设置方式：

body{ font-size:100% } p{ font-size:0.9em } p{ font-size:2em }同时，对于边框、内边距和外边距，也用em单位设定，可以防止元素在小窗口里显示得过大，或者说在移动设备的小屏幕上显得太过突兀。如：

.leftColumn{ width:28.6%; float:left; } .rightColumn{ width:71.4%; float:left; } .leftColumnContent{ border:0.07em solid gray; margin:0.3em; padding:0.2em 0.3em 0.4em 0.4em; }问题--对于多层嵌套的布局

应用等比缩放----css3中引入了新单位rem，始终相对与默认文字大小进行计算。

理解视口

对于设计一个真正的、移动设备友好的网站：1、修改视口的设置 2、使用媒体查询简化布局在小屏幕中显示时的效果。

其中方案一如下：

<meta content="initial-scale=1.0" name="viewpoint">可以让网页在iphone设备显示时，禁用缩放，看到页面在小屏幕中的真实效果。

ps：http://mobiletest.me 可以让你在最新的iphone、ipad和Android设备上比较网站的外观

响应式设计之媒体查询

目的：设计一个真正的、移动设备友好的网站 具体内容待续~~~