RWD自適應網頁CSS制定裝置尺寸的切換點及media-queries

上圖為各不同裝置螢幕尺寸RWD設定css時的切換點：
media-queries寫法如下

一.以link方式寫

//for 手機裝置(螢幕尺寸<768px)
<link href="style_mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:767px)">

//for 平板裝置(768px<螢幕尺寸<1024px)
<link href="style_pad.css" rel="stylesheet" type="text/css" media="screen and (min-width:768px) and (max-width:1024px)">

//for 一般電腦裝置(螢幕尺寸>1025px)
<link href="style_desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width:1025px)">

二.以@media 全部寫在一個css檔案內(載入速度最快，適合流量大的網站)

//共用區 此區會最快載入

body{...}
html{...}

//for 手機裝置(螢幕尺寸<768px)

@media screen and (max-width:767px){

   css for mobile .......

}

//for 平板裝置(768px<螢幕尺寸<1024px)
@media screen and (min-width:768px) and (max-width:1024px){   
   css for pad .......
}

//for 一般電腦裝置(螢幕尺寸>1025px)
@media screen and (min-width:1025px){   
   css for desktop .......
}

//for 手機裝置或平板裝置(裝置直擺的時候)
 @media screen and (orientation:portrait) { 
   …
 }

//for 手機裝置或平板裝置(裝置橫擺的時候)
 @media screen and (orientation:landscape){ 

   …

 }