css3 -- 媒体查询
2016-05-24 18:32
537 查看
媒体查询:
1、媒体查询优点:基于设备的属性检测设备,这样一来就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表,也就是说检测用户使用小屏幕的设备,css规则就会调整以适应该屏幕的尺寸,从屏幕上去除无关元素,提供更小的图片,让文本变得更加清晰
2、语法
@link元素调用,多种媒体选择中间用逗号隔开
@import指令调用
@在样式表中或style元素中添加
3、媒体特征
@样式
@设备宽度以及高度
@方向
@高宽比
@像素比
1、媒体查询优点:基于设备的属性检测设备,这样一来就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表,也就是说检测用户使用小屏幕的设备,css规则就会调整以适应该屏幕的尺寸,从屏幕上去除无关元素,提供更小的图片,让文本变得更加清晰
2、语法
@link元素调用,多种媒体选择中间用逗号隔开
<link href="" rel="stylesheet" media="logic media and (expression)" >
<link href="" rel="stylesheet" media="srceen,projection" >
@import指令调用
@import url("file") logic media and (expression)
@在样式表中或style元素中添加
@media logic media and (expression){ rules }
3、媒体特征
@样式
@media screen (min-width:400px){ h1{ background: } }
@设备宽度以及高度
@media media and (device-width:1024px) {rules} @media media and (max-device-width:1024px) {rules} @media media and (min-device-width:1024px) {rules}
@方向
@media media and (orientation:landscape/portrait){rules}
@高宽比
@media media and (aspect-ratio:horizontal/vertical){rules} @media media and (device-aspect-ratio:horizontal/vertical){rules}
@像素比
@media media and (-webkit-device-pixel-ratio : number){rules} @media media and (-moz-device-pixel-ratio : number){rules} @media media and (max--moz-device-pixel-ratio : number){rules} @media media and (min--moz-device-pixel-ratio : number){rules}
相关文章推荐
- css3 media媒体查询器用法总结 兼容ie8以下的方法
- 2016年CSS基础语法汇总-小白必备 很简单哦~
- CSS -webkit-gradient 属性简介
- HTML+CSS基础(七):CSS选择器
- css3 -- 浏览器支持
- CSS伪类、伪元素
- css sprites 优缺点
- CSS变化宽度布局
- About css sprites
- css属性继承和优先级
- CSS固定宽度布局
- css垂直水平居中小技巧
- XPath和CSS 3的解析器比较
- HTML+CSS基础(六):CSS样式与属性
- css中网页图片下方多出几像素问题分析
- 挂多个css还是新建class-多用组合,少用继承
- Webkit CSS实现
- css浮动
- css实现正方形div的3种方式
- 网页元素CSS居中实现完整攻略