前端css媒体查询不生效问题和如何使用案例最新(源码全)

一. 不生效问题总结

语法有好多种列举一个

@media screen and (max-width:980px) {
}

1. 语法里面screen 和and前后都有空格

2.引入meta标签语句

(1)原生html引入方法

在index.html里面的head标签内添加代码如下

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

如下图

(2)vue项目引入方法

步骤,打开vue项目找到public文件打开,然后再打开index.html放到vscode编译器里面，代码放入和原生html一样,顺序如下图

a.

b.

c.

3.择器的权重问题（样式被覆盖）

(1)相同class名写在下面的权重高于上面的权重，所以样式会覆盖上面的

(2)html引入link标签样式

 <link rel="stylesheet" href="./css/index.css">

index.css

html引入link标签样式也有先后顺序

@import url(common.css);/* 重置样式，相同的样式也放入里面 */
@import url(box.css);
@import url(navbar.css);
@import url(small-x.css) only screen and (max-width: 767px);
@import url(small.css) only screen and (max-width: 992px) and (min-width: 767px);
@import url(medium.css) only screen and (max-width: 1199px) and (min-width: 992px);
@import url(big.css) only screen and (min-width:1200px);

(3)css选择器权重可以百度一下

(4)样式后面加必须加!important可以增加权重，写在index.css样式文件，就更需要加!important,例如下面

@media  (max-width: 767px) {
    .nav {
        font-size: 2.5rem !important;
    }
}

下面的权重高于上面的，所以会覆盖，注意先后顺序

二. 媒体查询的使用

1.首先引入meta标签兼容移动设备（手机、平板），上面已经有步骤

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

2.参数解释：

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

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

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

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

user-scalable：用户是否可以手动缩放（默认设置为no）

3. 兼容IE8，需要加载两个JS文件：

 <!--[if lt IE 9]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<!--[endif]-->

4. 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:检测输出的设备是网格的还是位图设备。

5.使用,选一种适合自己的方案

需要特别注意的一点像素排序问题: 全部用min-width时，小的放上面大的在下面，同理如果是全部用max-width那么就是大的在上面，小的在下面

(1)方案

1.1、 大型设备（大台式电脑，1200px 起）
@media screen and (min-width:1200px){ … }

1.2、中型设备（台式电脑，992px 起）
@media screen and (min-width:992px){ … }

1.3、小型设备（平板电脑，768px 起）
@media screen and (min-width:768px) and (max-width:900px) { … }

1.4、超小设备（手机，小于 768px）
@media screen and (min-width:480px){
}

(2)方案

@media (min-width:1200px) {
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
}

@media only screen and (max-width: 992px) and (min-width: 767px) {
}

@media only screen and (max-width: 767px) {
}

(3)方案

@media  (max-width: 1365px) {
}

@media  (max-width: 1023px) {
}

@media  (max-width: 767px) {
}

@media  (max-width: 767px) {
}

(4)方案

/*手机*/
@media screen and (max-width:600px){
 }
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
 }
/*PC*/
@media screen and (min-width:960px){
}

三. 媒体查询的移动设备和PC设备的使用

1.max-device-width和max-width的区别

1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。

2、max-width是目标显示区域的宽度，例如，浏览器宽度。

3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。

4、如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。

5、通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。

2. 移动设备

@media screen and (max-device-width: 600px){
/ CSS 代码 /
}

3. PC设备

@media screen and (min-width: 960px){
/ CSS 代码 */
}

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！