Heim > Artikel > Web-Frontend > So legen Sie CSS-Stile für verschiedene Auflösungen fest

So legen Sie CSS-Stile für verschiedene Auflösungen fest

青灯夜游Original: 2021-09-13 17:41:434943Durchsuche

In CSS können Sie die „@media“-Regel verwenden, um Stile für unterschiedliche Auflösungen je nach Bildschirmgröße festzulegen, mit der Syntax „@media mediatype and|not|only (media feature){css style}“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie die „@media“-Regel verwenden, um Stile für verschiedene Auflösungen festzulegen.

Mit der @media-Abfrage können Sie verschiedene Stile für verschiedene Medientypen definieren. Die Syntax der @media-Abfrage:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

Beispiel:

/* 设置了浏览器宽度小于1600px时的样式 */ 
@media screen and (max-width: 1600px) {
    .select2-container{
        width:328px !important;
    }
    #address{
        width:calc(37% - 3px) !important;
    }
}
/* 设置了浏览器宽度小于1367px时的样式 */ 
@media screen and (max-width: 1367px) {
    .select2-container{
        width:275px !important;
    }
    #address{
        width:calc(36% + 3px) !important;
    }
}

Es ist ersichtlich, dass @media verschiedene Stile für unterschiedliche Bildschirmgrößen festlegen kann, insbesondere wenn Sie eine responsive Seite einrichten müssen, ist @media sehr nützlich. Wenn Sie die Browsergröße zurücksetzen, wird die Seite auch basierend auf der Breite und Höhe des Browsers neu gerendert.

Beispiel:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>无标题文档</title>
		<style>
			.abc {
				height: 300px;
				border: 1px solid #000;
				margin: 0 auto
			} //可以去掉边框
			@media screen and (min-width: 1201px) {
				.abc {
					width: 1200px
				}
			}
			/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
			
			@media screen and (max-width: 1200px) {
				.abc {
					width: 900px
				}
			}
			/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
			
			@media screen and (max-width: 900px) {
				.abc {
					width: 200px;
				}
			}
			/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
			
			@media screen and (max-width: 500px) {
				.abc {
					width: 100px;
				}
			}
			/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
		</style>
		<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
	</head>

	<body>
		<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
	</body>

</html>

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo legen Sie CSS-Stile für verschiedene Auflösungen fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So deaktivieren Sie die Seitenvergrößerung in HTML5Nächster Artikel：So deaktivieren Sie die Seitenvergrößerung in HTML5

In Verbindung stehende Artikel

Mehr sehen