Html5 Mobile Web 符合裝置尺寸設定

Viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width; initial-scale=1.0" />

Css

*Max Width 寬小於600px

@media screen and (max-width: 600px)
{
    .css{...}
    .css{...}
}

<link rel="stylesheet" media="screen and (max-width: 600px)" href="600.css" />

*Min Width 寬大於900px

@media screen and (min-width: 900px)
{
    .css{...}
    .css{...}
}

<link rel="stylesheet" media="screen and (min-width: 900px)" href="900.css" />

*Device Width 可視範圍最大為480px

@media screen and (max-device-width: 480px)
{
    .css{...}
    .css{...}
}

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="480.css" />

*寬 大於400px 小於800px 之間

@media screen and (min-width: 400px) and (max-width: 800px)
{
    .css{...}
    .css{...}
}

<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 800px)" href="style.css" />

範例

css

/*自訂1*/
@media screen and (min-width: 1200px) {  
    // 如果使用者之視窗寬度 >= 1200px。  
}  
    
@media screen and (min-width: 768px) and (max-width: 979px) {  
    // 如果使用者之視窗寬度介於 768px ~ 979px。     
}  
    
@media screen and (max-width: 767px) {  
    // 如果使用者之視窗寬度 <= 768px。     
}  
    
@media screen and (max-device-width: 480px) {  
    // 如果使用者之裝置寬度 <= 480px。  
}  

/*自訂2*/
@media screen and (min-width: 1280px) {  
    body{
      font-size:16px;
    }
} 
 
@media all and (min-width: 768px) and (max-width: 1280px) {
    body{
      font-size:16px;
    }
}
@media all and (min-width: 480px) and (max-width: 768px) {
    body{
      font-size:22px;
    }
}
@media all and (min-width: 320px) and (max-width: 480px) {
    body{
      font-size:28px;
    }
}
@media all and (max-width: 320px) {
    body{
      font-size:32px;
    }
}

link

/*自訂1*/
<link rel="stylesheet" type="text/css" href="all.css" media="screen">  
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-width: 1200px)">  
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">  
<link rel="stylesheet" type="text/css" href="c.css" media="screen and (max-width: 767px)">  
<link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)"> 

/*自訂2*/
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> /*直*/
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> /*橫*/
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css"> 

Rwd注意

避免破圖

div{
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
}

圖片等比縮放

/*固定寬度等比例縮放*/
img {
    height: auto;
    max-width: 100%;
}