标签:
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-width:320px);
b、在样式表中嵌入媒体查询
@media (max-width: 480px){
body{
/*style properties go here*/
}
.style{
/*style properties go here*/
}
}
四、 弹性网格
html源代码顺序的重要性
重置盒模型
将固定宽度转为弹性网格
五、 流式图片
1、 在样式表中添加以下样式
img{
max-width:100%;
}
2、 找到Ⅱ中的每一个<img>标签,删除其中的height和width属性
标签:
原文地址:http://www.cnblogs.com/lal-fighting/p/5111590.html