css014 响应式web设计
一、 响应式web设计基础知识
1、rwd的三大理念：a、用于布局的弹性网络， b、用于图片和视频的弹性媒体，c、为不同屏幕宽度创建的不同样式的css媒体查询。
二、 为RWD构建网页
1、 手机浏览器中为了忽略手机浏览器屏幕变小字体也变小的行为，可在head中添加一行代码：
<meta name="viewport" content="width=vedice-width">
最好是添加在<title></title>之前。
三、 媒体查询
1、使用媒体查询的策略
调整列：把列调整为手机适应的数目；
弹性宽度：在手机上，宽度最好设置为auto或者100%
紧缩空白空间：利用margin和padding将空白空间调小，避免布局零散
调整字号：适当调整字号
修改导航菜单：利用JavaScript动态的将导航栏变成一个下拉菜单。
在手持设备上隐藏内容：
使用背景图片：
2、创建断点
3、创建媒体查询
4、将查询包含在样式表中
a、使用@import指令
@import url(css/small.css) (max-320px);
b、在样式表中嵌入媒体查询
@media (max- 480px){
body{
/*style properties go here*/
}
.style{
/*style properties go here*/
}
}
四、 弹性网格
html源代码顺序的重要性
重置盒模型
将固定宽度转为弹性网格
五、 流式图片
1、 在样式表中添加以下样式
img{
max-100%;
}
2、 找到Ⅱ中的每一个<img>标签，删除其中的height和width属性
版权声明：未经作者同意，不得私自转载。http://www.cnblogs.com/lal-fighting/