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!