CSS - 响应式媒体查询

上一页
下一页

CSS 中的媒体查询是一种通过一些特性、特性和用户偏好来定位浏览器的方法，然后在元素上执行或应用样式。

媒体查询是在@media规则中指定的，该规则使用条件包装元素，这些条件描述了当浏览器满足这些条件时需要应用样式的时间和位置。

CSS RWD 媒体查询 - width 属性

在以下示例中，当视口宽度大于 35em 且小于 85em 时，主体的背景将更改为 plum。当视口宽度与该值范围不匹配时，它将回退到白色。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	div {
	 	 	 background-color: white;
	 	 	 height: 300px;
	 	 	 width: 300px;
	 	}

	 	@media (min-width: 35em) and (max-width: 85em) {
	 	 	 div {
	 	 	 	 	background-color: plum;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div></div>
</body>
</html>

CSS RWD 媒体查询 - 多个断点

在以下示例中，根据屏幕的大小，正文的背景将更改为不同的颜色。在媒体查询中使用 max-width 和 min-width 属性在不同的屏幕大小设置多个断点。在满足媒体查询的要求时，将应用样式。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	* {
	 	 	 margin: 0px;
	 	 	 padding: 0px;
	 	 	 box-sizing: border-box;
	 	}

	 	body {
	 	 	 font-family: sans-serif;
	 	 	 font-size: 35px;
	 	 	 background-color: aqua;
	 	 	 height: 1500px;
	 	 	 width: auto;
	 	}
	 	
	 	.container {
	 	 	 border: 4px solid red;
	 	 	 height: 100vh;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 background-color: aliceblue;
	 	}

	 	#size {
	 	 	 position: absolute;
	 	 	 top: 60%;
	 	 	 left: 50%;
	 	 	 transform: translateX(-50%);
	 	 	 font-size: 35px;
	 	}

	 	@media (max-width: 512px){
	 	 	 .container {
	 	 	 	 	background-color: plum;
	 	 	 }
	 	}

	 	@media (max-width: 657px) and (min-width: 513px){
	 	 	 .container {
	 	 	 	 	background-color: lightyellow;
	 	 	 }
	 	}

	 	@media (max-width: 1000px) and (min-width: 658px) {
	 	 	 .container {
	 	 	 	 	background-color: teal;
	 	 	 }
	 	}

	 	@media (min-width: 1001px) {
	 	 	 .container {
	 	 	 	 	background-color: bisque;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="container">Responsive Web Design</div>
	 	<div id="size"></div>
	 	<script>
	 	 	 window.onresize = screen;
	 	 	 window.onload = screen;

	 	 	 function screen() {
	 	 	 	 	checkWidth = window.innerWidth;

	 	 	 	 	document.getElementById('size').innerHTML = "Width : " + checkWidth + "px";
	 	 	 }
	 	</script>
</body>
</html>

 

CSS RWD 媒体查询 - 使用方向

在以下示例中，当屏幕的方向为横向时，正文的背景设置为 bisque，导航栏为蓝绿色。随着屏幕大小的调整，方向变为纵向，背景颜色变为海绿色，导航栏变为橙色并变得粘稠。使用媒体查询可以实现相同的功能。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	body {
	 	 	 background-color: bisque;
	 	}
	 	
	 	nav {
	 	 	 block-size: 5rem;
	 	 	 background: red;

	 	}

	 	@media only screen and (orientation: portrait) {
	 	 	 nav {
	 	 	 	 	 	 background: orange;
	 	 	 	 	 	 position: sticky;
	 	 	 	 	 	 top: 0;
	 	 	 	 	 	 color: black;
	 	 	 }
	 	 	 body {
	 	 	 	 	background-color: seagreen;
	 	 	 }
	 	}
</style>
</head>
<body>

	 	<nav>Navigation</nav>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

	 	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
</body>
</html>
打印本页
上一页
下一页