对相应式web设计的办法实现
发布时间:09/01 来源:未知 浏览:
关键词:
媒体查询的用途
media 媒体查询包括一个可选的媒体类型和,知足CSS3标准的前提下,包括零个或多个表达式,这些表达式描写了媒体特点,终究会被解析为true或false。假如媒体查询中指定的媒体类型匹配展现文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true.
500px-800px之间的设备 @media screen and (min-width: 500px) and (max-width: 800px) { ... }
最小宽度500 @media screen and (min-width: 500px){... }
在非打印设备下 @media not print and (max-width: 1200px)
使用方式:
实例
html:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>响应式设计</title> <link rel="stylesheet" type="text/css" href="day01.css" media="screen and (min-width:1024px)"/> <link rel="stylesheet" type="text/css" href="day02.css" media="screen and (max-width:1024px) and (min-width:600px)"/> <link rel="stylesheet" type="text/css" href="day03.css" media="screen and (max-width:600px)"/> </head> <body> <p class="top">头部</p> <p class="zhong"> <p class="left">左边</p> <p class="zhon">中心</p> <p class="right">右侧</p> </p> <p class="xia">底部</p> </body> </html>
css1:
.body{ margin:0; } .top,.zhong,.xia{ width:100%; margin:0 auto; } .top{ height:100px; background:#00f; } .zhong{ overflow:hidden; } .xia{ height:100px; background:#ff0; } .left,.zhon,.right{ float:left; } .left{ width:100%; height:200px; background:#0f0; } .zhon{ width:100%; height:350px; background:#f00; } .right{ width:100%; height:200px; background:#00f; }
css2:
.body{ margin:0; } .top,.zhong,.xia{ width:100%; margin:0 auto; } .top{ height:100px; background:#00f; } .zhong{ overflow:hidden; } .xia{ height:100px; background:#ff0; } .left,.zhon,.right{ float:left; } .left{ width:30%; height:200px; background:#0f0; } .zhon{ width:70%; height:350px; background:#f00; } .right{ width:100%; height:200px; background:#00f; }
css3:
.body{ margin:0; } .top,.zhong,.xia{ width:100%; margin:0 auto; } .top{ height:100px; background:#00f; } .zhong{ overflow:hidden; } .xia{ height:100px; background:#ff0; } .left,.zhon,.right{ float:left; background:#0f0; } .left{ width:20%; height:200px; } .zhon{ width:45%; height:350px; margin:0 20px; } .right{ width:25%; height:200px; }
运转结果:
1、
2、
3、
总结:.媒体查询Media Queries能在不一样的前提下使用不一样的样式,使页面在不一样在终端设备下到达不一样的渲染结果;到当前为止,CSS3 Media Queries得到了众多阅读器支撑,除了IE6-8阅读器不支撑之外,在所有现代阅读器中都可以完善支撑。还有一个不同凡响的是,Media Queries在其他阅读器中不要像其他CSS3属性一样在不一样的阅读器中增加前缀。
相关引荐:
关于css响应式的实现代码及结果
CSS实现响应式规划的办法
以上就是对响应式web设计的办法实现的具体内容,更多请关注百分百源码网其它相关文章!