RWD語法~~自動隨著裝置自行縮放

隨著時代演進，網頁部落格不是只顯示在PC上，諸凡平板電腦、手機等載具普遍，網頁部落格必須能夠在各種裝置上自行縮放顯示，尤其是圖片；這就是所謂響應式網頁設計。

響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、響應式網頁設計、回應式網頁設計、多螢網頁設計，這是一項開始於2011年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)。

以部落格為例需預設於CSS，語法如下：

//********* 程式碼參考 *******//

.iframe-rwd {
    position: relative;
    padding-bottom: 50%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

置於文章內容範例如下：

//********* 程式碼參考 *******//


<div :="" center="" class="iframe-rwd">






<iframe height="480" src="https://www.google.com/maps/d/embed?mid=1b0SQ3qEmmSATlpvpGhWWVO7Oz2H1KWKr" width="300"></iframe>


</div>

在PC上顯示如下：

在手機上顯示如下：