RWD:以區塊對角線的比例來設定隨螢幕大小自動伸縮的背景圖

例如要在<div class="autoSize"></div>設定隨不同螢幕尺寸自動伸縮的背景圖時
Css寫法如下

假設背景圖實際尺寸為 寬220 x 高125 像素

.autoSize{
width:100%;
height:0;
padding-bottom:56.82%; //圖片比例為以圖片高除以寬 x 100，即 125/220 x 100 =56.82 (四捨五入)
background-image:url( 圖片路徑 );
background-size:cover;
}

例如：
16:9的比例為 56.25%
4:3的比例為 75%


如果div物件寬度不是100%，則換算出的圖片比例須在乘以物件寬度的比例，如下
.autoSize{
width:45%;
height:0;
padding-bottom:25.57%; //圖片比例再乘以div區塊寬度 即：56.26 x 0.45 = 25.57(四捨五入)
background-image:url( 圖片路徑 );
background-size:cover;
}

相關：youtube 以iframe嵌入網頁符合自適應RWD

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){ 

   …

 }