天天看點
傳回

05-移動web之流式布局

一、視口

1.常見螢幕知識

裝置 解釋 描述
寬 螢幕的寬度 - （機關：英寸） 螢幕的寬度
高 螢幕的高度 -（機關：英寸） 螢幕的高度
對角線 螢幕的對角線的長度 英寸 一般說手機尺寸 是指以螢幕對角線為衡量 機關是 英寸
邏輯分辨率 螢幕的寬度 * 螢幕的高度 （機關：px） 描述螢幕的寬度和高度
裝置分辨率 實體像素點 螢幕裡面一共擁有的實體像素點的個數
PPI 像素密度 每英寸所擁有的實體像素點
裝置像素比 裝置分辨率和邏輯分辨率的比例（取寬度比較） 可以簡單了解為螢幕的清晰度的倍數

裝置分辨率就是手機中的發光點，數值越大，越清晰。

2.二倍圖

一倍圖：當裝置像素比為1:1時，使用1個裝置像素顯示1個CSS像素。

二倍圖：當裝置像素比為2:1時，使用4個裝置像素顯示1個CSS像素。

一張相同的圖檔放在裝置像素比為1的手機上和裝置像素比為2的手機上時，像素比為2的手機會出現失真現象。

在裝置像素比為2的手機上，原來的一個實體像素點能顯示的圖像卻變成了 由4個實體像素點來顯示，那麼就會造成 就近取色的效果，出現失真現象。

在标準的viewport設定中，使用倍圖來提高圖檔品質，解決在高清裝置中的模糊問題，就是統一将圖檔放大到2倍，使用時縮小2倍使用。

3.視口

視口（viewport）就是浏覽器顯示頁面内容的螢幕區域。 視口可以分為布局視口、視覺視口和理想視口。

視口就是一個包裹着html的容器，由喬布斯發明，預設寬度980px。

3.1 布局視口

在布局視口下，html标簽的寬度變成了 980px 而不是 和 螢幕等寬。

是所有手機端自帶的預設視口，預設視口分辨率為 980px，把一個980px寬的頁面放入到320px的小螢幕上，是以網頁元素元素都非常小。

3.2 标準理想視口（開發用） 

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
屬性名 取值 描述
width 正整數或device-width 定義視口的寬度，機關為像素
height 正整數或device-height 定義視口的高度，機關為像素，一般不用
initial-scale [0.0-10.0] 定義初始縮放值
minimum-scale [0.0-10.0] 定義縮小最小比例，它必須小于或等于maximum-scale設定
maximum-scale [0.0-10.0] 定義放大最大比例，它必須大于或等于minimum-scale設定
user-scalable yes/no 定義是否允許使用者手動縮放頁面，預設值yes

視口參數設定：

  • meta标簽用來描述或設定一個HTML網頁文檔的屬性
  • content 要設定或者描述的内容
  • content 要設定或者描述的内容
  • width 設定視口的寬度 device-width等于螢幕的寬度
  • initial-scale 頁面打開的時候視口放大的倍數 值:1
  • user-scalable 是否允許使用者縮放頁面 值：no
  • maximum-scale 如果允許放大的話 最大放大多少倍 值 ：1
  • minimum-scale 如果允許放大的話 最小放大多少倍 值 ：1

二、流式布局（百分比布局） 

為了讓頁面中的元素能跟随螢幕的大小變換而變化，會使用百分比的形式來設定寬度或者高度

1.幾個經典布局

1.左側固定，右側自适應（padding） 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 50px;
            background-color: #f34;
        }

        .left {
            /* 1.左側盒子固定，寫死寬高 */
             70px;
            height: 50px;
            /* 2.左浮動 */
            float: left;
            background-color: #095;
        }

        .right {
            /* 3.不寫寬度，給右側盒子加paddign-left，将内容擠過去 */
            padding-left: 70px;
        }

        .right .info {
            /* 4.在裡面套一個盒子，使padding生效 */
            height: 50px;
            background-color: #06c;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="info"></div>
        </div>
    </div>
</body>

</html>

2.左側固定，右側自适應（margin） 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 50px;
            background-color: #f34;
        }

        .left {
            /* 1.左側盒子固定，寫死寬高 */
             70px;
            height: 50px;
            /* 2.左浮動 */
            float: left;
            background-color: #095;
        }

        .right {
            height: 50px;
            /* 3.右側标準流，直接用margin擠過去 */
            margin-left: 70px;
            background-color: #06c;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

3.左側固定，右側自适應（overflow） 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 50px;
            background-color: #f34;
        }

        .left {
            /* 1.左側盒子固定，寫死寬高 */
             70px;
            height: 50px;
            /* 2.左浮動 */
            float: left;
            background-color: #095;
        }

        .right {
            height: 50px;
            /* 3.右側标準流，由于浮動的元素壓不住overflow:hidden*/
            overflow: hidden;
            background-color: #06c;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

4.右側固定，左側自适應（overflow）

其他兩個寫法與左側固定，右側自适應同理，隻需在body中将右側寫在前面即可

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 50px;
            background-color: #f34;
        }

        .right {
            /* 1.右側盒子固定，寫死寬高 */
             70px;
            height: 50px;
            /* 2.右浮動 */
            float: right;
            background-color: #095;
        }

        .left {
            height: 50px;
            /* 3.左側标準流，由于浮動的元素壓不住overflow:hidden*/
            overflow: hidden;
            /* 用margin也可以實作 */
            /* margin-right: 70px; */
            background-color: #06c;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 由于代碼從上往下執行，是以要将固定區域寫在前面， -->
        <!-- 如果自适應的區域寫在前面，由于沒寫寬，會将一行沾滿，浮動的固定區域隻會另起一行 -->
        <div class="right"></div>
        <div class="left"></div>
    </div>
</body>

</html>

5.左右固定，中間自适應 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 50px;
            background-color: #f34;
        }

        .left {
            height: 50px;
            float: left;
             70px;
            background-color: #09f;
        }

        .right {
            height: 50px;
            float: right;
             50px;
            background-color: #90f;
        }

        /* 左右寬高寫死，左浮右浮動 */
        .center {
            height: 50px;
            /* 1.用margin擠開左右距離 */
            /* margin: 0 50px 0 70px; */
            /* 2.用overflow */
            overflow: hidden;
            background-color: #06c;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 同理，這裡自适應的區域要寫在後面 -->
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>

</html>

6.左右固定，中間自适應（聖杯布局） 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
            line-height: 50px;
        }

        header,
        footer {
            height: 50px;
            background-color: #ccc;
        }

        footer {
            clear: both;
        }

        .box {
            /* 1.用預留出左右盒子的位置 */
            padding: 0 50px 0 80px;
        }

        .box .center,
        .box .left,
        .box .right {
            /* 2.三個盒子都左浮 */
            float: left;
            height: 50px;
        }

        .box .center {
            /* 3.自适應區域寬度100% */
             100%;
            background-color: #90f;
        }

        .box .left {
             80px;
            background-color: #09f;
            /* 4.往回走一個父盒子寬度，就是往上移一行 */
            margin-left: -100%;
            position: relative;
            /* 5.利用相對定位，往回走自身的寬度 */
            left: -80px;
        }

        .box .right {
             50px;
            background-color: #f34;
            /* 6.向上移動自身的寬度 */
            margin-left: -50px;
            /* 7.向右移動自身的寬度 */
            position: relative;
            right: -50px;
        }
    </style>
</head>

<body>
    <header>header</header>
    <div class="box">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

</html>

7.左右固定，中間自适應（雙飛翼布局） 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
            line-height: 50px;
        }

        header,
        footer {
            height: 50px;
            background-color: #ccc;
        }

        footer {
            clear: both;
        }

        .content {
            /* 1.預留出左右位置 */
            margin: 0 50px;
        }

        .box .center,
        .box .left,
        .box .right {
            /* 2.三個盒子都左浮 */
            float: left;
            height: 50px;
        }

        .box .center {
            /* 3.自适應盒子寬100% */
             100%;
            background-color: #095;
        }

        .box .left {
             50px;
            background-color: #09f;
            /* 4.左邊盒子上移一行 */
            margin-left: -100%;
        }

        .box .right {
             50px;
            background-color: #90f;
            /* 5.右邊盒子也上去 */
            margin-left: -50px;
        }
    </style>
</head>

<body>
    <header>header</header>
    <div class="box">
        <div class="center">
            <div class="content">center</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

</html>

2.京東案例

https://www.lanzous.com/ib5pw7a

上一篇: 分享如何恢複資源回收筒删除檔案的辦法
下一篇: 通過url下載下傳檔案