css – @media screen 的 max-width 說明教學

2013-06-08 / JSN / 0 Comments / 948 次瀏覽

Responsive Web Design

自適應的CSS寫法可參考
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
http://www.mrmu.com.tw/2011/04/06/css3-media-queries-liquid-layout/

首些我們要知道CSS的特性，對同一個class設定，下方設定會取代上方設定。

接著在此說明順序的問題:

範例A:
假設瀏覽器寬1920px，寬度是由小->大，但因為條件1符合、條件2符合、條件3符合，所以不管瀏覽器寬度怎麼改變，他始終顯示條件3(max-width: 1920px)的設定(使用紅字顏色)，
不是因為沒套用條件1與條件2，而是被條件3給覆蓋了。
換句話說，因為不管瀏覽器寬度怎麼改變，都符合條件3的需求，所以會呈現條件3的CSS。

<style>
/* 寬度從0px -　600px　使用此設定　*/
@media screen and (max-width: 600px)
{
	.fontcolor { color:blue; }
}

/* 寬度從0px -　1280px　使用此設定　*/
@media screen and (max-width: 1280px)
{
	.fontcolor { color:green; }
}

/* 寬度從0px -　1920px　使用此設定　*/
@media screen and (max-width: 1920px)
{
	.fontcolor { color:red; }
}
</style>
<div class="fontcolor">
	文字測試
</div>

範例B:
我們把範例A顛倒過來，情況就不同了。隨著瀏覽器拉寬拉窄，顏色會跟著變化。
概念也是由下方取代上方。
假設瀏覽器寬1500px，那剛好就會直接遇到條件一，繼下往下跑，因為條件二跟三都不符合，所以最終呈現條件一
假設瀏覽器寬1200px，條件一符合、條件二也符合，只有條件三不符合，所以最終呈現條件二
假設瀏覽器寬600px，條件一二三都符合，所以最終呈現條件三。

<style>
/* 寬度從0px -　1920px　使用此設定　*/
@media screen and (max-width: 1920px)
{
	.fontcolor { color:red; }
}

/* 寬度從0px -　1280px　使用此設定　*/
@media screen and (max-width: 1280px)
{
	.fontcolor { color:green; }
}

/* 寬度從0px -　600px　使用此設定　*/
@media screen and (max-width: 600px)
{
	.fontcolor { color:blue; }
}

</style>
<div class="fontcolor">
	文字測試
</div>

像這種 @media screen and (max-width: 1280px)可以應用在不同手機、電腦、筆電的瀏覽器尺寸
依照不同瀏覽器寬選擇不同的CSS呈現，非常好用，不需要為了讓手機板是應寬度，
而重新寫一個給手機用的架構。

#@media#CSS#max-width#排序#教學#自適應

發表迴響