css3响应式布局课件.ppt

《css3响应式布局课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、响应式布局响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行.为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本.也就是说一个页面可以在多个终端显现出你想要的效果,能够兼容各个终端.响应式布局的优缺点优点:面对不同分辨率设备灵活性强.能够快捷解决多设备显示适应问题根据不同的显示器调整设计最适合用户浏览习惯的页面.缺点:兼容各种设备工作量大,效率低下.代码累赘,会出现隐藏无用的元素,加载时间

2、加长.其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果.因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨识度不强利用CSS3-MediaQuery实现响应式布局1.mediaquery:通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件2.语法结构及用法:@media设备名only(选取条件)not(选取条件)and(设备选取条件),设备二{sRules}(1)在link中使用@media:

3、pe="text/css"media="screenand(max-width:600px)"href="link.css"/>(2)在样式表中内嵌@media:@mediascreenand(max-width:600px){选择器{属性:属性值;}}css3媒体查询语法：/*@mediascreenand(min-width:1440px)and(max-width:1600px){}*/@mediascreenand(min-width:1440px){/*大于等于1440*//*这里是特定的样式表*/body,in

4、put,textarea,select,small,a{font-size:14px;}}@mediascreenand(max-width:1024px){}@mediascreenand(max-width:768px){/*不大于768px的设备尺寸中响应式布局的特定样式*/}@mediascreenand(max-width:360px){}@mediascreenand(max-width:320px){}看了这几个写法是不是感觉响应式布局不过如此，哈哈，其实就是这么简单。MediaQuery语法详解

5、el="stylesheet"media="screenand(max-width:600px)"href="small.css"/>1.screen:指的是一种媒体类型;2.and:被称为关键词,与其相似的还有not,only.可能的操作符3.max-width:600px这个就是属性值,媒体特性,也就是媒体条件.最后要注意的是在页面的头部之间加上下面这句∶met

6、aviewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。参数设置∶width–viewport的宽度height–viewport的高度initial-scale–初始的缩放比例minimum-scale–允许用户缩放到的最小比例maximum-scale–允许用户缩放到的最大比例user-scalable–用户是否可以手动缩放

7、m-scale=1.0,user-scalable=no">

8、no"/>如果不是很明白，就直接粘贴过去使用就可以了。width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no大概意思是，网页宽度采用设备宽度，缩放比例为1，不允许用户缩放操作，以上