溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何使用@media設置不同分辨率的css樣式，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
在css中，可以使用“@media”規則來設置不同分辨率的樣式。
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。@media 查詢的語法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}例：
/* 設置了瀏覽器寬度小于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;
}
}可以看出：@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
實例：
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>上述內容就是如何使用@media設置不同分辨率的css樣式，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
