@media:device-width、orientation

Big_Old_Fish發表於2016-10-13
dev
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>media：device-width,orientation</title>
<style>
div{
width:200px;
height:100px;
align:top center;


}
@media all and (max-device-width:1024px) {
div{
background-color:yellow;/*螢幕寬度小於等於1024px時*/
}
}
@media all and (max-device-width:768px) {
div{
background-color:red;/*螢幕寬度小於等於768px時，會覆蓋上一個樣式定義中包含的0~768px的部分*/
}
}


@media all and (min-device-width:1024px) {
div{
background-color:blue;/*螢幕寬度大於等於1024px時*/
}
}
@media all and (orientation:landscape) {
div{
color:black;/*橫屏：頁面可見高度小於頁面可見寬度時*/
}
}
@media all and (orientation:portrait) {
div{
color:white;/*豎屏：頁面可見高度大於等於頁面可見寬度時*/
}
}
</style>
</head>


<body>
<div>頁面可見高度<b>小於</b>寬度時為黑字，頁面可見高度<b>大於或等於</b>寬度時為白字。device-width指裝置的螢幕寬度，不是指頁面可見寬度。</div>
<p><b>注意：</b>遇到符合同樣條件的media樣式定義相同內容時，在優先順序別相同的情況下最終樣式會根據文件流從上到下選擇到寫在最後的那個樣式。</p>
<p>為了避免出錯，處於兩個值間範圍的樣式最好不用覆蓋(這裡用了覆蓋)，而是把最大和最小值都寫出來，避免順序改變時樣式出錯。</p>
</body>
</html>

相關文章