CSS3 @media 查询

1.响应不同的屏幕宽度

根据屏幕的尺寸设定不同的样式

实例:模仿bootstrap的栅格布局,让不同尺寸的屏幕下容器有不同的宽度
当设定的屏幕宽度范围有重合时,后面的设定会覆盖前面的。所以要把宽度范围小的放到后面

<body>
    <div class="box"></div>
</body>
* {
	padding: 0;
	margin: 0;
}

html,body {
	width: 100%;
	height: 100%;
}

.box {
	height: 100px;
	background-color: red;
	box-sizing: border-box;
	color: white;
	text-align: center;
	float: left;
	border: 1px solid #fff;
}
        /* 当宽度设备屏幕范围 0-768px 时生效 */
@media screen and (max-width: 768px) {
            /* 超小设备手机(<768px) */
	.box {
		width: 50%;
	}
}
        /* 当宽度设备屏幕范围 大于768px 时生效 */
@media screen and (min-width: 768px) {
            /* 小型设备平板电脑(≥768px) */
	.box {
		width: 33.33%;
	}
}
        /* 当宽度设备屏幕范围 大于992px 时生效 */
@media screen and (min-width: 992px) {
            /* 中型设备台式电脑(≥992px) */
	.box {
		width: 25%;
	}
}
        /* 当宽度设备屏幕范围 大于1200px 时生效 */
@media screen and (min-width: 1200px) {
            /* 大型设备台式电脑(≥1200px) */
	.box {
		width: 16.66%;
	}
}

2.响应屏幕宽高比

根据屏幕的宽高比来设定不同的样式

这两个一般用来判断范围内的比率
min-aspect-ratio:页面可见区域宽度与高度的最小比率,值的格式为n/m
max-aspect-ratio:页面可见宽度与高度的最大比率,值的格式为n/m

这个用来判断具体的比率
aspect-ratio:页面可见区域宽度与高度的比率,值的格式为n/m

注意:手机横竖屏切换时屏幕宽高比会发生变化

一般来说,手机竖屏时宽高比<1,而横屏时宽高比>1

/* 当宽高比范围 0-1 时生效 竖屏 */
@media (max-aspect-ratio:1/1) {
	body {
		background-color: red;
	}
}
        /* 当宽高比范围 >=1 时生效 横屏 */
@media (min-aspect-ratio:1/1) {
	body {
		background-color: blue;
	}
}

设备的屏幕宽高比一般是由固定的值的,例如 (4:3)(16:9)(18:9)等等

@media (aspect-ratio:9/16){
    body{
         background-color: red;
    }
}
上一篇:vm.dirty_background_ratio and vm.dirty_ratio


下一篇:深度学习在训练时对图片随机剪裁(random crop)