CSS3 @media 查询

2020-12-03 13:33:07 阅读：231 来源： 互联网

标签：CSS3 ratio color media 查询宽度 aspect 宽高比屏幕

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS3 @media 查询

1.响应不同的屏幕宽度

2.响应屏幕宽高比