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

版权声明:未经作者同意,不得私自转载。http://www.cnblogs.com/lal-fighting/

上一篇:Solr 的安装方式


下一篇:js-JavaScript高级程序设计学习笔记10