css3响应式布局设计——回顾
2018-06-24 00:55:22来源:未知 阅读 ()
响应式设计是在不同设备下分辨率不同显示的样式就不同。
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 用于阅读器等发声设备
关键字:
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"/>
结果: 在横屏下显示这样式
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:gulp的安装与使用
下一篇:兄弟选择器 + 和 ~
- DIV居中的经典方法 2020-06-13
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- CSS Grid 布局 2020-06-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash