移動適配布局

移動適配布局

1. 像素有關(guān)

1.1 設(shè)備像素（物理像素 ）

  1. 顯示器的最小物理單位（對于一個(gè)顯示器來說是固定的）

  2. 以手機(jī)屏幕為例，屏幕上的真實(shí)像素點(diǎn)馍迄。iphone6 的設(shè)備像素 750 * 1334

  3. 通常說的4K顯示屏指的是 4096x2160柬姚。（像素多少是由生產(chǎn)廠商生產(chǎn)決定的）量承，就是設(shè)備像素，物理像素忧风。

1.2 CSS像素

  1. CSS 中的長度單位狮腿，在 CSS 中使用的 px 都是指 CSS 像素，width：200px缘厢。

  2. 在頁面不縮放的情況下吃度，1px的CSS像素 === 1設(shè)備像素===1物理像素

  3. 頁面放大200%時(shí)，頁面的設(shè)備物理像素依舊不變贴硫，放大的是CSS像素椿每。但是此時(shí)CSS像素與設(shè)備物理像素的關(guān)系變化了，1css像素 === 4設(shè)備物理像素（寬x2英遭，高x2兩個(gè)方向都放大）

1.3 設(shè)備獨(dú)立像素(獨(dú)立像素)（虛擬的窗口）

  1. 可以通過 window.screen.width/ window.screen.height 查看 375

  2. 操作系統(tǒng)定義的一種長度單位。iphone6 的設(shè)備獨(dú)立像素挖诸，

設(shè)備（手機(jī)）的寬度是固定的汁尺，不是將網(wǎng)頁設(shè)置的css寬度直接壓縮到設(shè)備寬度上，而是另外一個(gè)像素概念--設(shè)備獨(dú)立像素


sk.jpg

早期網(wǎng)頁版心980px税灌。

設(shè)備像素：獲取設(shè)備屏幕寬/高window.screen.width/height 控制臺切換到手機(jī)端均函，寬高也會跟著變化。

設(shè)備獨(dú)立像素：window.innerWidth菱涤，對于PC沒有設(shè)備獨(dú)立像素的概念，PC端就是視口的顯示的寬度洛勉，手機(jī)端則始終是個(gè)固定的值--設(shè)備獨(dú)立像素粘秆，980或1000等。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這段代碼是視口的配置：代表自適應(yīng)收毫，viewport就是視口攻走，處理視口的寬度為設(shè)備的寬度，縮放比例是1.0

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 視口的配置:沒有這段代碼此再，移動端窗口就不會自適應(yīng)昔搂，就會出現(xiàn)滾動條，比如iphone5 320px 而css寬度是980px -->
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: auto;
    }

    #box {
      width: 980px;
      height: 200px;
      background: pink;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div id="box">11111111</div>
</body>
1.4 PPI
  1. 指每英寸的物理像素?cái)?shù)
  2. 以尺寸為5.8英寸（屏幕對角線長度）屏幕對角線上的像素點(diǎn) / 對角線的英寸數(shù)
1.5 devicePixelRatio 設(shè)備像素比(dpr)
  1. devicePixelRatio指的是物理像素和設(shè)備獨(dú)立像素的比 即1獨(dú)立像素由多少物理像素渲染输拇。
  2. window.devicePixelRatio可查看
  3. window.devicePixelRatio = 物理像素 / 獨(dú)立像素
1.6 解決移動端1像素的問題

因?yàn)椴煌O(shè)備具有不同的dpr 所以,css1px 所代表的設(shè)備像素不同, 所以在有些設(shè)備上看到的粗,有些設(shè)備看到的細(xì),如果解決一像素邊框問題,

方法一
通過媒體查詢,查詢設(shè)備的dpr,根據(jù)dpr設(shè)置不同的寬度大小

#box{
    height: 200px;
    border-bottom:1px solid red;

}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #box { border-bottom: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    #box{ border-bottom: 0.333333px solid blue }
}

缺點(diǎn): 小數(shù)像素目前兼容性較差摘符，一些以前的版本可能不支持。
理論上最小的單位是 1px策吠。 所以會出現(xiàn)有的設(shè)備寫 0.5px 無效（沒有邊框）的情況逛裤。
方法二: 借助偽元素縮放處理

.button:after{
    content: "";
    display: block;
    height: 0;
    border-top: #999 solid 1px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleY(0.5); /* 將 1px 的線條縮小為原來的 50% */
}

缺點(diǎn): 不是所有設(shè)備的dpr都是2 所以固定縮放0.5 也會有問題
方法三借助媒體查詢和偽元素縮放來解決

// 定義mixin
.border-1px(@color: rgba(7,17,27,0.2)){
    position:relative;
    &:after{
        display:block;
        position:absolute;
        left:0;
        bottom:0;
        content:'';
        width:100%;
        border-top:1px solid @color;
    }
}

// 根據(jù)不同的dpr 使用不同的縮放
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
    .border-1px {
        .border-1px;
        &:after {
            -webkit-transform: scaleY(0.7);
            -moz-transform: scaleY(0.7);
            -ms-transform: scaleY(0.7);
            -o-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    .border-1px {
        .border-1px;
        &:after {
            -webkit-transform: scaleY(0.5);
            -moz-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            -o-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    .border-1px {
        .border-1px;
        &:after {
            -webkit-transform: scaleY(0.3);
            -moz-transform: scaleY(0.3);
            -ms-transform: scaleY(0.3);
            -o-transform: scaleY(0.3);
            transform: scaleY(0.3);
        }
    }
}

2. viewport

2.1 什么是視口

在移動端viewport視口就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域,

在viewport中有兩種視口,分別表示為 :

  1. visual viewport (可視視口) 正常屏幕視口
  2. layout viewport (布局視口) 設(shè)備獨(dú)立像素 默認(rèn)980px

兩個(gè)視口是疊加在一起

visual viewport 固定大小跟屏幕大小相同, 可以通過window.innerWidth 來獲取.

layout viewport 可改變大小, 默認(rèn)大小為980像素, 可以通過document.documentElement.clientWidth 獲取

視口默認(rèn)的寬度是980px,我們可以用meta標(biāo)簽來舒服視口看度.此時(shí)視口寬度被束縛為320-480之間（不同的手機(jī)）

現(xiàn)代網(wǎng)頁需要將layout viewport 設(shè)置成跟visual viewport 相同的大小,方便網(wǎng)頁制作

2.2 視口的設(shè)置

通過<meta>標(biāo)簽進(jìn)行設(shè)置,name屬性指定viewport的值,content屬性進(jìn)行視口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=false,maximum-scale=2.0" >
取值 含義
width 設(shè)置layout view的寬度為特定值 device-width表示設(shè)備的寬度
height 設(shè)置layout view的寬度為特定值,一般不設(shè)置
initial-scale 設(shè)置頁面初始縮放
minimum-scale 設(shè)置頁面最小縮放
maximum-scale 設(shè)置頁面的最大縮放
user-scalable 設(shè)置頁面能否縮放 允許user-scalable=true ，不允許user-scalable=false 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對IE瀏覽器猴抹，盡量選擇IE=edge -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=false,maximum-scale=2.0">
  <!--原信息 視口原信息 內(nèi)容寬度layout viewport設(shè)備獨(dú)立像素視口寬度等于設(shè)備的視口寬度带族。user-scalable=false 不允許縮放 -->
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: auto;
    }

    #box {
      width: 980px;
      /* 如果超出設(shè)備寬度就會出現(xiàn)滾動條，不超就沒有滾動條 */
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="box">ddddddddd</div>
</body>

</html>

3.適配

3.1胁后、為什么要做適配

a) 為了適應(yīng)各種移動端設(shè)備敷硅，完美呈現(xiàn)應(yīng)有的布局效果

b) 各個(gè)移動端設(shè)備，分辨率大小不一致蒸殿，網(wǎng)頁想鋪滿整個(gè)屏幕择克，并在各種分辨下等比縮放

現(xiàn)在主流的開發(fā)思路

  1. PC端 和移動端 分開開發(fā)
  2. 如果想在既能適應(yīng)PC恬总、又能適應(yīng)移動端 響應(yīng)式開發(fā)（麻煩 寫好多套css ）
3.2、自適應(yīng)適配方案(布局方案)
3.2.1 先了解一些單位

  1. em: 相對單位, 1em等于當(dāng)前元素的font-size值

  2. rem 相對單位 r -> root 根節(jié)點(diǎn)( html ) 根據(jù)html的字體大小計(jì)算其他元素尺寸 1rem 就是html的font-size值

  3. vw/vh ; 把屏幕分為100份, 1vw就等于屏幕寬度的1%祠饺。也就是元素的寬高根據(jù)屏幕尺寸來定的越驻。
    width：300%；寬度值為百分比時(shí)是相對于父級寬度值的道偷。

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    #wrap {
      width: 50vw;    /* 元素的寬度根據(jù)視口來定 */
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="wrap"></div>
  </div>
</body>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--縮放比例：移動端css像素自適應(yīng)設(shè)備像素 -->
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 50vw;
      /*寬度始終是屏幕的一半*/
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="box">
  </div>
</body>
3.2.2 媒體查詢布局方式

meida queries 的方式可以說是早期采用的布局方式缀旁，它主要是通過查詢設(shè)備的寬度來執(zhí)行不同的 css 代碼，最終達(dá)到界面的配置勺鸦。核心語法是：

@media screen and (max-width: 600px) { /*當(dāng)屏幕尺寸小于600px時(shí)并巍，應(yīng)用下面的CSS樣式*/


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--縮放比例：移動端css像素自適應(yīng)設(shè)備像素 -->
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: auto;
    }

    #box {
      height: 200px;
      background: pink;
    }

    /* 媒體查詢做適配 */

    @media screen and (width: 320px) {
      #box {
        width: 160px;
      }
    }

    @media screen and (width: 375.2px) {
      #box {
        width: 187.5px;
      }
    }

    @media screen and (width: 414px) {
      #box {
        width: 207px;
      }
    }

    @media screen and (width: 414px) {
      #box {
        width: 207px;
      }
    }

    @media screen and (width: 768px) {
      #box {
        width: 384px;
      }
    }
  </style>
</head>

<body>
  <div id="box">
  </div>
</body>

優(yōu)點(diǎn)

  1. 方法簡單，成本低换途，特別是對移動和PC維護(hù)同一套代碼的時(shí)候懊渡。
  2. 調(diào)整屏幕寬度的時(shí)候不用刷新頁面即可響應(yīng)式展示

缺點(diǎn)

  1. 代碼量比較大，維護(hù)不方便
  2. 為了兼顧大屏幕或高清設(shè)備军拟，會造成其他設(shè)備資源浪費(fèi)剃执，特別是加載圖片資源
  3. 為了兼顧移動端和PC端各自響應(yīng)式的展示效果，難免會損失各自特有的交互方式
3.2.3 百分比與Flex布局（百分百與彈性盒模型是目前常用的布局方式）

布局的特性: 關(guān)鍵元素高寬和位置都不變懈息，只有容器元素在做伸縮變換

這種布局是一種典型的彈性布局

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    #box {
      display: flex;
      /* 彈性盒模型 */
      flex-wrap: wrap;
      /*換行*/
      justify-content: space-around;
      /*水平對齊*/
      width: 90%;
      /* height: 200px;高度不固定肾档，不需要啦 */
      background-color: pink;
      margin: 0 auto;
    }
    li {
      width: 80px;
      height: 80px;
      background-color: skyblue;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <ul id="box">
    <li>觀察文字大小</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

布局的方式:

  1. 布局盒子采用百分比
  2. 容器盒子與文字采用固定大小
  3. Flex 確定位置(也可以采用浮動)

優(yōu)缺點(diǎn):

  1. 好處: 大屏下可以展示更多內(nèi)容
  2. 壞處: 寬屏下比例會比較不協(xié)調(diào)

注意: 這種情況css尺寸單位用px就好，不要用rem辫继，避免增加復(fù)雜度怒见。

例子: 拉勾網(wǎng)

3.2.4 rem布局方式

布局的特性: 關(guān)鍵元素盒子大小與文字都隨著屏幕大小不同,而展示不同的大小

布局的方式:

  1. 根據(jù)屏幕大小不同設(shè)置html不同的字體大小
  2. 所有的盒子尺寸和文字大小采用rem的布局方式
<!DOCTYPE html>
<html lang="en" style="font-size: 10px;">
<!-- rem布局 font-size如果寫死，box的width就是固定的了姑宽，不能自適應(yīng)遣耍。所以font-size需要?jiǎng)討B(tài)的-->

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    #box {
      width: 30rem;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <ul id="box">

  </ul>
</body>
</html>

動態(tài)設(shè)置font-size，設(shè)置方式炮车，常用的是通過JS

首先找一個(gè)基準(zhǔn)屏幕iphone6/7/8 375px

var fontSize= document.documentElement.clientWidth /3.75  //獲取當(dāng)前屏幕的寬度/ 3.75
document.documentElement.style.fontSize = fontSize + 'px'

字體也可以不使用rem單位(通常也不建議字體用rem單位), 采用不同的媒介方式,

@media screen and (max-width:321px){
    .basesize{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .basesize{font-size:16px}
}

@media screen and (min-width:400px){
    .basesize{font-size:18px}
}

如果只是希望盒子根據(jù)屏幕大小不同而改變, 但是文字大小不改變,可以在body重新固定文字大小

body{
    font-size:16px;
}

rem的布局--使用js動態(tài)設(shè)置font-size方式布局


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var fontSize = document.documentElement.clientWidth / 3.75  //基準(zhǔn)屏的font-size為100px舵变，整數(shù)好開發(fā)。不同寬度的屏幕示血，font-size會自動計(jì)算棋傍。rem布局 font-size如果寫死，box的width就是固定的了难审，不能自適應(yīng) 
    document.documentElement.style.fontSize = fontSize + 'px'
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-size: 16px;
    }

    #box {
      width: 1.875rem;
      /*占屏幕的一半 */
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="box">ddddddddd

  </div>
</body>

</html>

代表網(wǎng)站: 網(wǎng)易, 美團(tuán)

rem另一種使用vw單位布局寫法--代表網(wǎng)易

<!DOCTYPE html>
<!-- 網(wǎng)易不使用js處理基準(zhǔn)值瘫拣，使用vw處理基準(zhǔn)值 一份是375/100   共有 100/3.75 份 -->
<html lang="en" style="font-size:26.666vw;">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-size: 16px;
    }

    #box {
      width: 1.875rem;
      /*占屏幕的一半 */
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="box">ddddddddd

  </div>
</body>

</html>
3.2.5 縮放布局方式

.固定高度寬度.文字大小，通過改變縮放比例適配

根據(jù)屏幕的分辨率動態(tài)設(shè)置適配縮放比例告喊，達(dá)到等比縮放的功能

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <script>
    let baseWidth = 375;//定義基準(zhǔn)頁面進(jìn)行開發(fā)麸拄，然后以這個(gè)基準(zhǔn)頁面為準(zhǔn)進(jìn)行縮放
    let screeWidth = window.screen.width;//獲取當(dāng)前設(shè)備屏幕寬度
    console.log(screeWidth)
    let scale = screeWidth / baseWidth;//縮放比例=屏幕寬度/基準(zhǔn)值
    console.log(scale);
    let meta = document.createElement('meta')//創(chuàng)建meta標(biāo)簽
    meta.setAttribute('name', 'viewport')// 添加name屬性也可以meta.name='viewport'
    //添加content屬性
    meta.setAttribute('content', `width=${baseWidth},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
    document.head.appendChild(meta)//將meta標(biāo)簽添加到頁面上  實(shí)現(xiàn)適配當(dāng)前手機(jī)屏幕的寬度派昧，視口寬度等于設(shè)備寬度，不出現(xiàn)滾動條或空白區(qū)域了
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      overflow: auto;
      /* 超出自動加滾動條 */
    }
    #box {
      width: 375px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="box">ddddddddd</div>
</body>
</html>

根據(jù)dpr來設(shè)置不同的viewport縮放比例

// 改變視口的縮放比例
(function(){
    // 方法一
    var width = window.screen.width;
    var fixedW = 375;
    var scale = width / fixedW;
    var meta = document.createElement('meta');
    meta.setAttribute('name','viewport');
    meta.setAttribute('content',`width=${fixedW},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
    document.head.appendChild(meta);
   
   
})()

如果是double設(shè)計(jì)圖(雙倍屏,真實(shí)的設(shè)備上有雙倍的像素點(diǎn))

// 改變視口的縮放比例
(function(){
    // 方法一
    var width = window.screen.width;
    var fixedW = 375;
    var scale = width / fixedW * 0.5;
    var meta = document.createElement('meta');
    meta.setAttribute('name','viewport');
    meta.setAttribute('content',`width=${fixedW},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
    document.head.appendChild(meta);
    
})()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <script>
    let baseWidth = 375;//定義基準(zhǔn)頁面進(jìn)行開發(fā)拢切，然后以這個(gè)基準(zhǔn)頁面為準(zhǔn)進(jìn)行縮放
    let screeWidth = window.screen.width;//獲取當(dāng)前設(shè)備屏幕寬度
    let scale = screeWidth / baseWidth * .5;//基準(zhǔn)值保留375,這里要縮小.5倍.縮放比例=屏幕寬度/基準(zhǔn)值
    let meta = document.createElement('meta')//創(chuàng)建meta標(biāo)簽
    meta.setAttribute('name', 'viewport')// 添加name屬性也可以meta.name='viewport'
    //添加content屬性
    meta.setAttribute('content', `width=${baseWidth},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
    document.head.appendChild(meta)//將meta標(biāo)簽添加到頁面上  實(shí)現(xiàn)適配當(dāng)前手機(jī)屏幕的寬度蒂萎，視口寬度等于設(shè)備寬度，不出現(xiàn)滾動條或空白區(qū)域了
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: auto;
      /* 超出自動加滾動條 */
    }

    #box {
      width: 750px;
      /* UI給的設(shè)計(jì)圖一般750px 放大2倍*/
      height: 400px;
      /*放大2倍*/
      font-size: 32px;
      /*字體也放大2倍*/
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="box">ddddddddd</div>
</body>

</html>
3.3 通過vw設(shè)置 html 字體

以iphone6為例 375px=100vw 1vw = 3.75
如果我希望 html的字體大小是100px

html{
    font-size:26.6666667vw;
}

如果切換到iphone 6plus 1vw = 4.41px

注意, 要給body重置一下font-size: 16px;

3.4 其他小技巧
3.4.1固比固

三欄布局,

利用box-sizing

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #wrap {
      position: relative;
      box-sizing: border-box;
      /* 怪異盒模型 */
      padding: 0 50px;
      width: 100%;
      height: 60px;
      background-color: skyblue;
    }

    #left,
    #right {
      width: 50px;
      height: 40px;
      ;
      background-color: red;
    }

    #left {
      position: absolute;
      top: 0;
      left: 0;
    }

    #right {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="wrap">
    <div id="left"></div>
    <div id="middle">
      左右固定50 中間部分放大縮小</div>
    <div id="right"></div>
  </div>
</body>

</html>

利用flex

#box{
    width: 100%;
    height: 60px;
    display:flex;
}
#box .left{
    width:60px;
    height: 100%;
    background-color: red;
}
#box .content{
    flex:1;
    height: 100%;
    background-color: blue;
}
#box .right{
    width:60px;
    height: 100%;
    background-color: yellow;
}
3.4.2 設(shè)置高度按比例變換
  1. 不設(shè)置高度

盒子不設(shè)置高度,圖片寬度100%,高度默認(rèn)按比例縮放

2.采用padding-top給盒子設(shè)置自動,然后用背景圖

一個(gè)元素的padding淮椰、margin值的百分比是相對于父元素的寬度的百分比五慈。

借用padding-top來處理,我們知道padding也可以顯示背景

width: 60%;
height: 0;
padding-top:60%;

padding-bottom也可以但是,padding-top更好一點(diǎn) ,因?yàn)榭梢詏verflow:hidden ;關(guān)閉超出的部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
    }

    #img-wrap {
      position: relative;
      padding-top: 50%;
      background-color: pink;
    }

    #img {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0)
    }
  </style>
</head>

<body>
  <!--避免 圖片有時(shí)加載速度很慢,可能會一點(diǎn)點(diǎn)加載，會破壞布局 -->
  <div id="img-wrap">
    <img id="img" height="207" src="./images/3333.jpg" alt="">
    <!--圖片不顯示時(shí),該有的占位還存在 -->
  </div>
  <div> 大家好</div>
</body>

</html>

3.通過js

var boxWidth = parseInt(getComputedStyle(box)['width']);
box.style.height = boxWidth+'px'

補(bǔ)充:

http://gs.statcounter.com 瀏覽器市場占比

https://h5.m.taobao.com/#index 手機(jī)淘寶 rem http://m.jd.com/ 手機(jī)京東 100% http://jx.tmall.com/ 天貓 100% http://3g.163.com/touch/all?nav=1&version=v_standard 網(wǎng)易 rem

http://www.cnblogs.com/2050/p/3877280.html viewport 解析 meta解析 http://ljinkai.github.io/2015/06/06/mobile-web-skill/ 移動端布局注意技巧

https://gs.statcounter.com/browser-market-share 瀏覽器使用占比

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末主穗，一起剝皮案震驚了整個(gè)濱河市泻拦，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌忽媒，老刑警劉巖争拐，帶你破解...
    沈念sama閱讀 216,591評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異晦雨，居然都是意外死亡架曹，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門闹瞧，熙熙樓的掌柜王于貴愁眉苦臉地迎上來绑雄，“玉大人，你說我怎么就攤上這事奥邮∩鳎” “怎么了？”我有些...
    開封第一講書人閱讀 162,823評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵漠烧，是天一觀的道長。 經(jīng)常有香客問我靡砌，道長已脓，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,204評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任通殃，我火速辦了婚禮度液，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘画舌。我一直安慰自己堕担，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布曲聂。 她就那樣靜靜地躺著霹购，像睡著了一般。 火紅的嫁衣襯著肌膚如雪朋腋。 梳的紋絲不亂的頭發(fā)上齐疙，一...
    開封第一講書人閱讀 51,190評論 1贊 299
  • 城市分裂傳說
    那天膜楷，我揣著相機(jī)與錄音，去河邊找鬼贞奋。 笑死赌厅，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的轿塔。 我是一名探鬼主播特愿，決...
    沈念sama閱讀 40,078評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼勾缭！你這毒婦竟也來了揍障？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 38,923評論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤漫拭，失蹤者是張志新（化名）和其女友劉穎亚兄，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體采驻，經(jīng)...
    沈念sama閱讀 45,334評論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡审胚，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了礼旅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膳叨。...
    茶點(diǎn)故事閱讀 39,727評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖痘系，靈堂內(nèi)的尸體忽然破棺而出菲嘴，到底是詐尸還是另有隱情，我是刑警寧澤汰翠，帶...
    沈念sama閱讀 35,428評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布龄坪，位于F島的核電站，受9級特大地震影響复唤，放射性物質(zhì)發(fā)生泄漏健田。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一佛纫、第九天 我趴在偏房一處隱蔽的房頂上張望妓局。 院中可真熱鬧，春花似錦呈宇、人聲如沸好爬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0贊 22
  • 一樁弒父案甥啄，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽存炮。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間僵蛛，已是汗流浹背尚蝌。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留充尉，地道東北人飘言。 一個(gè)月前我還...
    沈念sama閱讀 47,734評論 2贊 368
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像驼侠，于是被迫代替她去往敵國和親姿鸿。 傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評論 2贊 354