码迷,mamicode.com
首页 > Web开发 > 详细

css014 响应式web设计

时间:2016-01-08 00:12:09      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:

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

css014 响应式web设计

标签:

原文地址:http://www.cnblogs.com/lal-fighting/p/5111590.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!