2020/04/06

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上顯示如下:


在手機上顯示如下:


沒有留言:

張貼留言

熱門文章