当前位置:首页 > 前端 > CSS > 正文内容

CSS3 @media 用法总结

放牧的风4周前 (05-27)CSS113
//语法:
@media mediatype and | not | only (media feature) { css-code; }
//也可以针对不同的媒体使用不同的stylesheets: 
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

一、首先是<meta>标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释:
width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

二、<head>标签中引入(CSS2 media)

其实并不是只有CSS3才支持Media的用法,早在CSS2开始就已经支持Media,具体用法,就是在HTML页面的head标签中插入如下代码:

例如我们想知道现在的移动设备是不是纵向放置的显示屏,可以这样写:

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="style.css">

既然CSS2可以实现CSS的这个效果为什么不用这个方法呢,很多人应该会问,但是上面这个方法,最大的弊端是他会增加页面http的请求次数,增加了页面负担,我们用CSS3把样式都写在一个文件里面才是最佳的方法。

下面来解释一下遇到冲突时的机制:

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)">  
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">
上面将设备分成3种,分别是宽度大于800px时,应用 styleA ,宽度在600px到800px之间时应用 styleB ,以及宽度小于600px时应用 styleC 。那假如宽度正好等于800px时该应用那个样式?是 styleB,因为前两条表达式都成立,按CSS默认优先级规则后者覆盖了前者。
因此,为了避免冲突,这个例子正常情况应该这样写:
<link rel="stylesheet" href="styleA.css" media="screen">  
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

三、回归CSS3 @media

上面我们大概讲了下CSS2的媒体查询用法,现在我们重新回到CSS3的媒体查询,在第一段代码上面我用的是小于960px的尺寸的写法,那现在我们来实现等于960px尺寸的代码,以下代码需要写在style标签或者css文件中:

@media screen and (max-device-width:960px){
    body{background:red;}
}

然后就是当浏览器尺寸大于960px时候的代码了:

@media screen and (min-width:960px){ 
    body{background:orange;}
}

我们还可以混合使用上面的用法:

@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}

上面的这段代码的意思是当页面宽度大于960px小于1200px的时候执行下面的CSS。

四、Media所有参数汇总

以上就是我们最常需要用到的媒体查询器的三个特性,大于,等于,小于的写法。媒体查询器的全部功能肯定不止这三个功能,下面是我总结的它的一些参数用法解释:

width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)
color-index:检查设备颜色索引表中的颜色,他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)
resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。
grid:检测输出的设备是网格的还是位图设备。

(max-width:599px) 
(min-width:600px) 
(orientation:portrait)  //竖屏
(orientation:landscape)  //横屏
(-webkit-min-device-pixel-ratio: 2) //像素比

五、媒体类型

  1. all 所有媒体

  2. braille 盲文触觉设备

  3. embossed 盲文打印机

  4. print 手持设备

  5. projection 打印预览

  6. screen 彩屏设备

  7. speech '听觉'类似的媒体类型

  8. tty 不适用像素的设备

  9. tv  电视

六、关键字

  1. and

  2. not:not关键字是用来排除某种制定的媒体类型

  3. only:only用来定某种特定的媒体类型

很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备

七、浏览器支持情况

IE8-
IE9+
Chrome 5+
Opera 10+
Firefox 3.6+<
Safari 4+

八、常用的几种屏幕宽度设定:

@media screen and (min-width: 1200px) {
    css-code;
}

@media screen and(min-width: 960px) and (max-width: 1199px) {
    css-code;
}

@media screen and(min-width: 768px) and (max-width: 959px) {
    css-code;
}

@media screen and(min-width: 480px) and (max-width: 767px) {
    css-code;
}

@media screen and (max-width: 479px) {
    css-code;
}


扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://faka.grazingwind.com/post/63.html

标签: CSSmeta
分享给朋友:
返回列表

上一篇:display:none visibility:hidden opacity:0 区别

没有最新的文章了...

相关文章

display:none visibility:hidden opacity:0 区别

display: none;DOM 结构:浏览器不会渲染 display 属性为 none 的元素,不占据空间;事件监听:无法进行 DOM 事件监听;性能:动态改变此属性时会引起重排,性能较差;继承:不会被子元素继承,毕竟子类也不会被渲染;...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。