首页 > 其他分享> > CSS3 @media 查询

CSS3 @media 查询

2020-12-03 13:33:07 作者：互联网

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;
    }
}

标签：CSS3,ratio,color,media,查询,宽度,aspect,宽高比,屏幕
来源： https://www.cnblogs.com/OrochiZ-/p/14079019.html