CSS3响应式布局_html/css_WEB-ITnose

响应式布局有哪些优点和缺点

优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
　　代码累赘，会出现隐藏无用的元素，加载时间加长
　　其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
　　一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

1、Media Query

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;　　}

2、利用meta标签对viewport进行控制

移动设备默认的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低版本兼容问题可参考：