一. 不生效问题总结
语法有好多种列举一个
@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 代码 */
}
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!