如何在CSS3中使用@media属性

　　介绍

本篇文章给大家分享的是有关如何在CSS3中使用@media属性,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

//语法: 　　@media  mediatype 以及|,not  |, only  (media 特性),{,css代码;}//也可以针对不同的媒体使用不同的样式表:, 　　

一、首先是标签

这段代码的几个参数解释：

  • width=device-width：宽度等于当前设备的宽度

  • initial-scale：初始的缩放比例（默认设置为1.0）

  • minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

  • maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

  • user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

二、标签中引入（CSS2 media）

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

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

页面宽度小于960的执行指定的样式文件：

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

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


　　
　　

上面将设备分成3种,分别是宽度大于800 px时,应用即将,宽度在600 px到800 px之间时应用styleB,以及宽度小于600 px时应用styleC。那假如宽度正好等于800 px时该应用那个样式?是styleB,因为前两条表达式都成立,按CSS默认优先级规则后者覆盖了前者。

因此,为了避免冲突,这个例子正常情况应该这样写:

& lt; link  rel=皊tylesheet", href=https://www.yisu.com/zixun/眘tyleA.css“媒体="屏幕"> 　　 　　

<强>三,回归CSS3 @media

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

@media  screen 以及(max-device-width: 960 px) { 　　,,,身体{背景:红色;} 　　}

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

@media  screen 以及(min-width: 960 px) {, 　　,,,身体{背景:橙色;} 　　}

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

@media  screen 以及(min-width: 960像素),以及(max-width: 1200 px) { 　　,,,身体{背景:黄色;} 　　}

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

<强>四、媒体所有参数汇总

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

<李>

宽度:浏览器可视宽度。

<李>

高度:浏览器可视高度。

如何在CSS3中使用@media属性