详解CSS3中@media的实际使用


Posted in HTML / CSS onAugust 04, 2015

语法:

CSS Code复制内容到剪贴板
  1. @media :<sMedia> { sRules }  

取值:

<sMedia>:
    指定设备名称。
{sRules}:
    样式表定义。

说明:

判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等).

复制代码
代码如下:
media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid

常见写法:
 

CSS Code复制内容到剪贴板
  1. @media screen and (max-width600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/  
  2.   .class {   
  3.     background#ccc;   
  4.   }   
  5. }  

@media screen and这是一种最常见的写法,后面跟上限定的屏幕尺寸
带all 跟 only的写法

一般all跟only都是对应在一起出现的
 

CSS Code复制内容到剪贴板
  1. @media all and (min-width:xxx) and (max-width:xxx){   
  2. /*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/  
  3. }   
  4.     
  5. @media only screen and (min-width:xxx) and (max-width:xxx){   
  6. /*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/  
  7. }   

device-aspect-ratio  

device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
用法:
 

CSS Code复制内容到剪贴板
  1. @media only screen and (device-aspect-ratio:4/3)  
HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 #HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 #HTML / CSS
详解CSS中iconfont的使用
Aug 04 #HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 #HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 #HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 #HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 #HTML / CSS
You might like
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python封装对象实现时间效果
2020/04/23 Python
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python3实现购物车功能
2018/04/18 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python远程邮件控制电脑升级版
2019/05/23 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
关于Python解包知识点总结
2020/05/05 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
学校门卫管理制度
2014/01/30 职场文书
灰雀教学反思
2014/04/28 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
端午节演讲稿
2014/05/23 职场文书
中秋节祝酒词
2015/08/12 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技