Heim >Web-Frontend >Front-End-Fragen und Antworten >So legen Sie CSS-Stile für verschiedene Auflösungen fest
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!