Viewport

Viewport是指裝置的螢幕是幾像素*幾像素。

瀏覽器Viewport寬度可透過<metaname=”viewport”>設定

而依照density設定的Viewport，即可以在不同尺寸裝置上，顯示相同範圍的內容

基本設定

語法於html的head中

<mata name=”viewport” content=”width=device-width”>

抓取viewport的寬度

導入css語法和尺寸設定

<mata name=”viewport” content=”width=device-width”>

@*正常套用style-l.css*@

<link rel=”stylesheet” href=”style-l.css”>

@*螢幕於600-979像素內套用style-m.css*@

<link rel=”stylesheet” href=”style-m.css”

media=”only screen and (min-width:600px) and (max-width:979px)”>

@*螢幕低於599像素內套用style-s.css*@

<link rel=”stylesheet” href=”style-s.css”

media=”only screen and (max-width:599px)”>

@*and(orientation)裝置方向*@

@*特別提醒and和(max-width:599px)中間需加入空白鍵否則無效果*@

 

版面設定

L版css(目前習慣版型)

body{

margin:24px 10px;

@*頁面周圍留白上下24像素左右10像素*@

}



#container{

width:960px;

margin:auto;

@*寬度960像素，容器於中央，container為body內一層*@

}



#header{

margin:0 0 50px;

}



#content{

width:600px;

float:left;

margin:0 0 50px;

@*寬度600像素，內容向左，下方邊界50px *@

}



#sidebar{

width:300px;

float:right;

margin:0 0 50px;

}



#footer{

clear:both;

@*清除浮動狀態*@

}