css014 响应式web设计

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属性