css之@media网页适配

原因：

原本是想用 iview Grid 栅格,但以下响应并不符合我的需求
【我需要的分辨率是1920和1536】，所以需要手动修改

解决方案：

• html

<Row>
<i-col :xs="6" :sm="6" :md="6" :lg="8">
	<div class="description-term">服务器IP：</div>
	<div class="description-detail">{{ selectObj.server }}</div>
</i-col>
</Row>

• css【从小到大渲染】

// CSS样式与DOM/JS一样，从前往后加载，后面的代码覆盖前面的代码。当 min-width 和 max-width 混用时，一定要注意前后顺序。
@media (min-width: 1536px) {
	:deep(.ivu-col-span-md-6) {
		display: block;
		flex: 0 0 25%;
		max-width: 25%;
	}
}
@media (min-width: 1920px) {
	:deep(.ivu-col-span-lg-8) {
		display: block;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.33333333%;
		flex: 0 0 33.33333333%;
		max-width: 33.33333333%;
	}
}

注意事项：
1.CSS @media min-width max-width 不生效

CSS样式与DOM/JS一样，从前往后加载，后面的代码覆盖前面的代码。当 min-width 和 max-width 混用时，一定要注意前后顺序。

有可能是 @media 的顺序放错了。
min-width 表示最小，即 ≥
max-width 表示最大，即 ≤

2.min-width,max-width 是指的什么宽度

其实并不是当前内容的父div宽度，也不是指屏幕宽度，而是指这个页面的窗口宽度
(也就是说：虽然屏幕有 1920px，但我们浏览器没有全屏，浏览器宽度拉到 1000px，那么也是按 1000px 来参与计算的。)

3.什么顺序才是对的呢

• 如果都是min-width，书写顺序应该是从小到大
• 如果都是max-width，书写顺序应该是从大到小
• 如果是区间范围的，书写顺序为从小到大,如下所示：

/*当页面宽度大于1000px且小于1200px的时候执行，1000-1200*/
@media screen and (min-1000px) and (max- 1200px){
    body{
        font-size:16px
    }
}
/*当页面宽度大于1280px且小于1366px的时候执行,1280-1366*/
@media screen and (min-1280px) and (max- 1366px){
    body{
        font-size:18px
    }
}

4.index.html中的<meta name="viewport" content="width=device-width, maximum-scale=1">都是指什么意思呢？？

在网页的中增加这句话，可以让网页的宽度自动适应手机屏幕的宽度。其中：
width=device-width： 表示宽度是设备屏幕的宽度
initial-scale=1.0： 表示初始的缩放比例
minimum-scale=0.5： 表示最小的缩放比例
maximum-scale=2.0： 表示最大的缩放比例
user-scalable=yes： 表示用户是否可以调整缩放比例