HTML5響應式佈局（簡易）

乞力馬紮羅的雪CYF發表於2015-09-28
HTML

1.響應式佈局：

響應式佈局是2010年5月提出的概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念是為了解決移動網際網路而誕生的。其目的是為使用者提供更加舒適的介面和更好的使用者體驗。

2.優缺點：

優點：（1）面對不同解析度裝置靈活性強；

（2）能夠快捷解決多裝置顯示適應問題；


缺點：（1）相容各種裝置工作量大，效率低下；

（2）程式碼累贅，會出現隱藏無用的元素，載入時間長；


響應式佈局基本實現：

1.CSS中的Media Query（媒介查詢）：

裝置寬高：device-width,device-height;

渲染視窗的寬和高：width,height;

裝置的手持方向：orientation;

裝置的解析度：resolution;

2.使用方法：

外聯

內嵌樣式


下面我將使用HTML和CSS實現比較簡單的響應式佈局，程式碼如下：

（1）HTML程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--當螢幕的最大寬度不超過640px-->
    <!--only screen and (max-width:640px)這是CSS中的語法，最大限度是640px-->
    <link href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)">


    <!--最小寬度640px-->
    <style>
        /*最小限度不超過640px*/
        @media screen and (min-width: 640px){
            body{
                background-color: blueviolet;
            }
        }
    </style>
</head>
<body>

</body>
</html>

（2）CSS程式碼如下：

*{

    margin: 0px;
    padding: 0px;
}

body{

    background-color: aqua;

}

實現效果就是當瀏覽器螢幕較寬時，背景是一種顏色。當螢幕縮小，背景顏色將會改變。也就是說網頁會對螢幕大小的變化做出響應。


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章