利用@media与@media screen进行响应式布局 ( 赞）

野性酷女 2022-05-15 04:19 278阅读 0赞

原文出处：[http://www.511yj.com/media-media-screen.html （原文更易阅读）][http_www.511yj.com_media-media-screen.html]

# 利用@media与@media screen进行响应式布局 #

![511遇见][511]

**文章目录**\[隐藏\]

*  了解Media Queries
 *  @media与@media screen区别
 *  Media Queries工作方式:
 *  Media使用说明举例
 *  基于视窗宽度的媒体查询断点设置

**在互联网的通知的今天，在移动端充斥我们生活的今天，** 做一个自适应的网站是我们不二的选择，那么我们就学会不同屏幕下的布局，那么我们就必须了解@media与@media screen

### **了解Media Queries** ###

Media Queries，其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。

css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS，我们不去讨论。

css3的@media属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句来匹配各种类型的屏幕。

### **@media与@media screen区别** ###

@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。

不过这只是笼统的做法，其实如果把“screen”换为“print”，写为@media print，那么该css就可用到打印设备上了，但要注意，@media print声明的css只能在打印设备上有效。

### **Media Queries工作方式:** ###

在media属性里：

1.  ● screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型

1.  ● and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

1.  ● (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

**1、种是直接在link中判断设备的尺寸，然后引用不同的css文件：**

1.      <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

1.      <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用styleB.css

**2、另一种方式，即是直接写在 style 标签里：**

1.      @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
2.      .class {
3.      background: #ccc;
4.      }
5.      }

写法是前面加@media，其它跟link里的media属性相同。

### **Media使用说明举例** ###

**1、前端响应式布局最出名的框架莫过于 Bootstrap**

下面我们看看min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了。

1.      /* 小屏幕（平板，大于等于 768px） */
2.      @media (min-width: @screen-sm-min) { ... }
3.       
4.      /* 中等屏幕（桌面显示器，大于等于 992px） */
5.      @media (min-width: @screen-md-min) { ... }
6.       
7.      /* 大屏幕（大桌面显示器，大于等于 1200px） */
8.      @media (min-width: @screen-lg-min) { ... }

**2、自适应代码**

1.      @media (min-width: 768px){ //>=768的设备 }
2.      @media (min-width: 992px){ //>=992的设备 }
3.      @media (min-width: 1200){ //>=1200的设备 }

**注意下顺序**，如果你把@media (min-width: 768px)写在了下面那么就是错误的！！！

1.      @media (min-width: 1200){ //>=1200的设备 }
2.      @media (min-width: 992px){ //>=992的设备 }
3.      @media (min-width: 768px){ //>=768的设备 }

**因为如果是1440,由于1440>768那么你的1200就会失效。**  
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

1.      @media (max-width: 1199){ //<=1199的设备 }
2.      @media (max-width: 991px){ //<=991的设备 }
3.      @media (max-width: 767px){ //<=768的设备 }

**3、高级的混合应用**

1.      @media screen and (min-width:1200px){}
2.      @media screen and (min-width: 960px) and (max-width: 1199px) {  }
3.      @media screen and (min-width: 768px) and (max-width: 959px) {  }
4.      @media only screen and (min-width: 480px) and (max-width: 767px){  }
5.      @media only screen and (max-width: 479px) {  }

1.      /* Large desktop */
2.      @media (min-width: 1200px) { ... }
3.      /* Portrait tablet to landscape and desktop */
4.      @media (min-width: 768px) and (max-width: 979px) { ... }
5.      /* Landscape phone to portrait tablet */
6.      @media (max-width: 767px) { ... }
7.      /* Landscape phones and down */
8.      @media (max-width: 480px) { ... }

### **基于视窗宽度的媒体查询断点设置** ###

前提设置body的字体为100%。其具有一个简单的计算公式：100% = 16px = 1em = 14pt

1.      /*Viewport = 1920px*/
2.      @media screen and (max-width: 120em){}
3.      /*Viewport = 1680px*/
4.      @media screen and (max-width: 105em){}
5.      /*Viewport = 1400px*/
6.      @media screen and (max-width: 87.5em){}
7.      /*Viewport = 1200px*/
8.      @media screen and (max-width: 75em){}
9.      /*Viewport = 1024px*/
10.     @media screen and (max-width: 64em){}
11.     /*Viewport = 960px*/
12.     @media screen and (max-width: 60em){}
13.     /*Viewport = 800px*/
14.     @media screen and (max-width : 50em){}
15.     /*Viewport = 768px*/
16.     @media screen and (max-width : 48em){}
17.     /*Viewport = 600px*/
18.     @media screen and (max-width: 37.5em){}
19.     /*Viewport = 480px*/
20.     @media screen and (max-width: 30em){}
21.     /*Viewport = 320px*/
22.     @media screen and (max-width: 20em){}
23.     /*Viewport = 240px*/
24.     @media screen and (max-width: 15em){}
25.     /*
26.     High Resolution/Retina Display Media Queries
27.     */
28.     /*Pixel Density 3*/
29.     @media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){}
30.     /*Pixel Density 2*/
31.     @media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){}
32.     /*Pixel Density 1.5*/
33.     @media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){}
34.     /*Pixel Density 1.25*/
35.     @media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){}
36.     /*
37.     Printed Style Media Queries
38.     */
39.     /*Print Resolution 300 dpi*/
40.     @media print and (min-resolution: 300dpi){}
41.     /*Print Resolution 144 dpi*/
42.     @media print and (min-resolution:144dpi){}
43.     /*Print Resolution 96 dpi*/
44.     @media print and (min-resolution:96dpi){}
45.     /*Print Resolution 72 dpi*/
46.     @media print and (resolution:72dpi){}

[http_www.511yj.com_media-media-screen.html]: http://www.511yj.com/media-media-screen.html
[511]: /images/20220515/59584e45570d44aeac101cb9be417932.png