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

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

寧陜網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,寧陜網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為寧陜成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的寧陜做網(wǎng)站的公司定做！

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

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

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

例：

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

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

實例：

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時 abc 顯示1200px寬度 */
			
			@media screen and (max-width: 1200px) {
				.abc {
					width: 900px
				}
			}
			/* 設(shè)置了瀏覽器寬度不大于1200px時 abc 顯示900px寬度 */
			
			@media screen and (max-width: 900px) {
				.abc {
					width: 200px;
				}
			}
			/* 設(shè)置了瀏覽器寬度不大于900px時 abc 顯示200px寬度 */
			
			@media screen and (max-width: 500px) {
				.abc {
					width: 100px;
				}
			}
			/* 設(shè)置了瀏覽器寬度不大于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寬度會隨瀏覽器寬度變化哦，試試改變?yōu)g覽器寬度</div>
	</body>

</html>

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

分享文章：如何使用@media設(shè)置不同分辨率的css樣式
URL鏈接：http://bm7419.com/article10/jdiggo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、、外貿(mào)網(wǎng)站建設(shè)、微信公眾號、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容