详解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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
CSS预处理框架——Stylus
Apr 21 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
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python迭代器和生成器介绍
2015/03/06 Python
Python用threading实现多线程详解
2017/02/03 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
快速了解Python中的装饰器
2018/01/11 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Django如何自定义分页
2018/09/25 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
庆祝三八妇女节标语
2014/10/09 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
2014年学前班工作总结
2014/12/08 职场文书
开票证明
2015/06/23 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
如何利用React实现图片识别App
2022/02/18 Javascript
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers