详解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之多背景background使用示例
Oct 18 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
HTML常用标签超详细整理
Mar 19 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
Django处理文件上传File Uploads的实例
2018/05/28 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
给医务人员表扬信
2014/01/12 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
党的生日演讲稿
2014/09/10 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
党员个人剖析材料
2014/09/30 职场文书
新员工考核评语
2014/12/31 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
60句有关成长的名言
2019/09/04 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP