隨著viewport寬度套用樣式表的設定方法
[方法一]
從HTML匯入外部樣式表單的設定
<link rel="stylesheet" href="外部樣式css檔" media="only 媒體類型and (特性)">
在HTML的head寫入
<head>
<meta name="viewport" content="width=device-width">
<!-- 基於density設定的解析度，設定viewport寬度 -->
例如:
<link rel="stylesheet" href="style-l.css">
<!-- 基套用樣式表一 -->
<link rel="stylesheet" href="style-m.css" media="only screen and (min-width:600px) and (max-width:980px)">
<!-- 螢幕寬度在600px和980之間套用樣式表M -->
<link rel="stylesheet" href="style-s.css" media="only screen and (max-width:599px)">
<!-- 螢幕寬度在600px以下時套用樣式表S -->
</head>
[方法二]
直接於CSS寫入設定
<link rel="stylesheet" href="外部樣式css檔" media="only 媒體類型and (特性)">
在HTML檔寫入
<meta name="viewport" content="width=device-width">
<!-- 基於density設定的解析度，設定viewport寬度 -->
<link rel="stylesheet" href="style-l.css">
<!-- 基套用樣式表一 -->
於CSS檔寫入
@media only screen
and (min-width : 600px) and (max-width : 980px){
#container {width: 100%;}
...........略...............
}
@media only screen
and (max-width : 599px){
#container {width: 100%;}
...........略...............
}
[方法三]
CSS匯入外部樣式表
@media url ("外部樣式檔") only 媒體類型and (特性);
例如:
@media url ("style-l.css") only screen ;
@media url ("style-m.css") only screen and (min-width:600px) and (max-width:980px);
@media url ("style-s.css") only screen and (max-width:599px);
參考資料：HTML5+CSS智慧型手機專用網站設計
沒有留言:
張貼留言