使用css3响应式布局设计之回顾

响应式设计是在不同设备下分辨率不同显示的样式就不同。
　　media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。
　　　　语法： @media mediatype and | not | only (media feature) {}
　　　　示例：
　　　　　　<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
　　　　结果： 分辨率在大到600的时候 显示这个样式表里面的样式。

　　媒体类型：

　　　　　　all 用于所有设备

　　　　　　print 用于打印机和打印设备　　　　　　

　　　　　　screen 用于电脑屏幕，平板电脑，智能手机。

立即学习“前端免费学习笔记（深入）”；

　　　　      speech 用于阅读器等发声设备

　　关键字：

现代化家居响应式网站模板1.0

现代化家居响应式网站模板源码是以cmseasy进行开发的家居网站模板。该软件可免费使用，模板附带测试数据！模板源码特点：整体采用浅色宽屏设计，简洁大气，电脑手机自适应布局，大方美观，功能齐全，值得推荐的一款模板，每个页面精心设计，美观大方，兼容各大浏览器；所有代码经过SEO优化，使网站更利于搜索引擎排名，是您做环保类网站的明确选择。无论是在电脑、平板、手机上都可以访问到排版合适的网站，即便是微信等

0

查看详情

　　　　   and 运算符用于符号两边规则均满足条件则匹配。

　　　　　　@media screen and (max-width : 600px) {
　　　　　　　　　　/*匹配宽度小于600px的电脑屏幕*/
　　　　　　}

　　　　not关键字是用来排除某种制度的媒体类型。
　　　　　　@media not print {
　　　　　　　　/*匹配除了打印机以外的所有设备*/
　　　　　　}
　　　　only 用来定某种特定的媒体类型。
　　　　　　@media only screen and (min-width:300) and (max-width:500){
　　　　　　　　/*这段是只(only)针对彩色屏幕设备*/
　　　　}

　　媒体特性： （常用的）　　　　

　　　　max-width(max-height): 最大宽度和最大高度

　　　　　　@media (max-width: 600px) { 
　　　　　　　　匹配界面宽度小于600px的设备
　　　　　　}
　　　　min-width(min-height) : 最小宽度和高度
　　　　　　@media (min-width : 400px) { 
　　　　　　　　匹配界面宽度大于400px的设备
　　　　　　}
　　　　max-device-width(max-device-height) 设备的最大宽度和高度
　　　　　　@media (max-device-width: 800px) { 
　　　　　　　　匹配设备(不是界面)宽度小于800px的设备
　　　　　　}
　　　　min-device-width(min-device-height):  设备的最大宽度和高度
　　　　　　@media (min-device-width: 600px) { 
　　　　　　　　匹配设备(不是界面)宽度大于600px的设备
　　　　　　}
　　　　orientation: portrait 竖屏
　　　　　　<link rel="stylesheet" media="all and
　　　　　　　　(orientation:portrait)" 
　　　　　　href="indexa.css"/>
　　　　　结果: 在竖屏下显示这样式
　　　　orientation:landscape 横屏
　　　　　　<link rel="stylesheet" media="all and 
　　　　　　　　(orientation:landscape)" 
　　　　　　　　　　href="indexa.css"/>
　　　　　结果: 在横屏下显示这样式

以上就是使用css3响应式布局设计之回顾的详细内容，更多请关注php中文网其它相关文章！