（HTML5）第七章 css3和响应式设计

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

响应式设计基础

百分比和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设备上比较网站的外观

响应式设计之媒体查询

目的：设计一个真正的、移动设备友好的网站

具体内容待续~~~