css3响应式布局探析.ppt

响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行.为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本.也就是说一个页面可以在多个终端显现出你想要的效果,能够兼容各个终端.;响应式布局的优缺点 优点: 面对不同分辨率设备灵活性强. 能够快捷解决多设备显示适应问题 根据不同的显示器调整设计最适合用户浏览习惯的页面. 缺点: 兼容各种设备工作量大,效率低下. 代码累赘,会出现隐藏无用的元素,加载时间加长. 其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果. 因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨 识度不强;利用CSS3-Media Query实现响应式布局 1.media query: 通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精 确作用于不同的媒体类型和同一媒体的不同条件 2.语法结构及用法: @media设备名only(选取条件)not(选取条件)and(设备选取条件),设 备二{sRules} (1)在link中使用@media: link rel=stylesheet type=text/css media=screen and (max-width:600px) href=link.css / (2)在样式表中内嵌@media: @media screen and(max-width:600px){ 选择器{ 属性:属性值; } };css3媒体查询语法： /*@media screen and (min-width:1440px) and (max-width:1600px){}*/ @media screen and (min-width:1440px){ /*大于等于1440*/ /*这里是特定的样式表*/ body,input,textarea,select,small,a{font-size:14px;} } @media screen and (max-width:1024px){ } @media screen and (max-width:768px){ /*不大于768px的设备尺寸中 响应式布局的特定样式*/ } @media screen and (max-width:360px){ } @media screen and (max-width:320px){ } 看了这几个 写法是不是感觉响应式布局不过如此，哈哈，其实就是这么简单。; Media Query语法详解 link rel=stylesheet media=screen and(max-width:600px) href=small.css / 1.screen:指的是一种媒体类型; 2.and:被称为关键词,与其相似的还有not,only.可能的操作符 3.max-width:600px这个就是属性值,媒体特性,也就是媒体条件.;　最后要注意的是在页面的头部head/head之间加上下面这句∶ 　　meta name=“viewport” content=“width=device-width; initial-scale=1.0” 　　meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。 　　参数设置∶ 　　width – viewport的宽度 　　height – viewport的高度 　　initial-scale – 初始的缩放比例 　　minimum-scale – 允许用户缩放到的最小比例 　　maximum-scale – 允许用户缩放到的最大比例 　　user-scalable – 用户是否可以手动缩放;meta name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no meta name=apple-mobile-web-app-capable content=yes / meta name=apple-mobile-web-app-status-bar-style content=black-translucent / meta name=format-detection content=telephone=yes/ meta name=msapplica