如何使用@media設(shè)置不同分辨率的css樣式

發(fā)布時(shí)間：2021-09-14 09:40:47 來源：億速云閱讀：272 作者：柒染欄目：web開發(fā)

本篇文章為大家展示了如何使用@media設(shè)置不同分辨率的css樣式，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

在css中，可以使用“@media”規(guī)則來設(shè)置不同分辨率的樣式。

使用 @media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。@media 查詢的語法：

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

例：

/* 設(shè)置了瀏覽器寬度小于1600px時(shí)的樣式 */ 
@media screen and (max-width: 1600px) {
    .select2-container{
        width:328px !important;
    }
    #address{
        width:calc(37% - 3px) !important;
    }
}
/* 設(shè)置了瀏覽器寬度小于1367px時(shí)的樣式 */ 
@media screen and (max-width: 1367px) {
    .select2-container{
        width:275px !important;
    }
    #address{
        width:calc(36% + 3px) !important;
    }
}

可以看出：@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。

實(shí)例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>無標(biāo)題文檔</title>
		<style>
			.abc {
				height: 300px;
				border: 1px solid #000;
				margin: 0 auto
			} //可以去掉邊框
			@media screen and (min-width: 1201px) {
				.abc {
					width: 1200px
				}
			}
			/* css 注釋說明：設(shè)置了瀏覽器寬度不小于1201px時(shí) abc 顯示1200px寬度 */
			
			@media screen and (max-width: 1200px) {
				.abc {
					width: 900px
				}
			}
			/* 設(shè)置了瀏覽器寬度不大于1200px時(shí) abc 顯示900px寬度 */
			
			@media screen and (max-width: 900px) {
				.abc {
					width: 200px;
				}
			}
			/* 設(shè)置了瀏覽器寬度不大于900px時(shí) abc 顯示200px寬度 */
			
			@media screen and (max-width: 500px) {
				.abc {
					width: 100px;
				}
			}
			/* 設(shè)置了瀏覽器寬度不大于500px時(shí) 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實(shí)例：我這個(gè)DIV寬度會(huì)隨瀏覽器寬度變化哦，試試改變?yōu)g覽器寬度</div>
	</body>

</html>

上述內(nèi)容就是如何使用@media設(shè)置不同分辨率的css樣式，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何使用@media設(shè)置不同分辨率的css樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽