Heim >Web-Frontend >HTML-Tutorial >CSS3响应式布局_html/css_WEB-ITnose
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
CSS3中的Media Query(媒介查询)Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。根据视窗的大小自动调整布局。**1、通过不同的媒体类型和条件定义样式表规则。**媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面**2、Media能获得的值**设备的宽和高: device-width,device-height显示屏幕/触觉设备渲染窗口的宽和高: width,heigth显示屏幕/触觉设备设备的手持方向: orientation(portrait|lanscape) 横向/竖向 画面比例: aspect-ratio 浏览器的长宽比屏幕比例: device-aspect-ratio 设备屏幕的长宽比,如4/3,16/9等。视觉媒体: color 定义每一组输出设备的彩色原件个数,如果不是彩色设备,则值等于0分辨率: resolution 定义设备的非暴力,如:96dpi,300dpi以上仅仅orientation不支持max,min.**3、可用设备参数名**all 所有设备braille 盲文embossed 盲文打印handheld 手持设备print 文档打印或者打印预览模式projection项目演示(如幻灯片)screen 彩色电脑屏幕tty 固定字母间距的网络媒体,如电传打字机**4、逻辑关键字**only 限定某种设备类型and 逻辑与,连接设备名与选择条件、选择条件1与选择条件2not 排除某种设备(除了什么之外), 设备列表 **5、语法结构及用法**@media 设备名 only (选取条件) not (选取条件) and (设备选取条件), 设备二{sRules}在link中使用@media:<link rel="stylesheet" type="text/css" media="only screen and (max-width: 640px),only screen and (max-device-width: 640px)"> <p>href = “home.css”/> <br> only可以省略,第一个条件是网页的最大宽度是640,第二个条件是设备的最大宽度是640px。 <br> @media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {//code} <br> 电脑屏幕尺寸不小于1024px,并且最大的可见宽度为989px;设备最大宽度为480px,并且横向放置,设备宽度不小于480px,并且小于1024px,竖直放置的设备。 <br> 字符间以空格相连,选取条件包含在小括号内,code为设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔. <br> <strong>6、测试响应式布局</strong> <br> 响应式布局需要在不同的设备上测试,可以使用浏览工具来检验不同尺寸屏幕小的显示效果。帮助你在不同尺寸屏幕下浏览网站效果的工具 - Responsivator http://responsive.d3corp.com/?d3corp.com</p> <p><strong>7、响应式布局设计</strong></p> <pre class="sycode">/*浏览器的可视区域不小于980px*/ @media screen and (min-width:980px){ .head{width:100%; height:70px; } .head #logo{position:fixed; top:0px; left:50px;} .head nav{ width:870px;background:#fff;height:70px; margin:0 auto;} .head nav a{ width:100px; height:40px; margin:15px 0px; display:inline-block; } }/*浏览器的可视区域在640px和980px之间*/ @media screen and (min-width:640px) and (max-width:980px){ .head{width:70px;height:870px;} .head nav{ width:70px;background:#fff;height:870px;margin-top:20px;} .head nav a{ width:70px; height:40px; margin:15px 0px; display:inline-block; } }/*浏览器的可视区域小于640px*/ @media screen and (max-width:640px){ .head{width:256px; height:256px;position:fixed; bottom:20px; left:20px;} .head #logo{position:absolute; top:0px; left:0px; right:0; bottom:0; padding:auto; margin:auto;} .head nav{width:256px; height:256px;background-color:rgba(0,0,0,0.6); border-radius:50%; transform:scale(0.1) rotate(-270deg); opacity:0; transition:all 500ms;margin-top:0px;} .head nav a{display:block; width:40px;height:40px;border-radius:50%; position:absolute;margin-left:-20px; margin-top:-20px; }
为了更好的显示效果,往往还要格式化一些CSS属性的初始值,如:
/* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust: none; } /* 设置HTML5元素为块 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。
设置width为decice-width;
<meta name="viewport" content="width=device-width; initial-scale=1.0">
content中参数设置:
width – viewport的宽度
height – viewport的高度,这个属性很少使用
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 no或者yes
最后对于在IE浏览器中不支持media query的情况,我们可以使用Media Query JavaScript来解决,只需要在页面头部引用css3-mediaqueries.js即可。示例:
IE8及低版本浏览器不支持CSS3 media queries的解决方法
另外关于IE8低版本兼容问题可参考: