详解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实现背景渐变的方法
Jul 14 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 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
239军机修复记
2021/03/02 无线电
解析isset与is_null的区别
2013/08/09 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
详解python单元测试框架unittest
2018/07/02 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
pytorch permute维度转换方法
2018/12/14 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
护士进修自我鉴定
2014/02/07 职场文书
新农村建设汇报材料
2014/08/15 职场文书
公司出差管理制度范本
2015/08/05 职场文书
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers