移動端適配問題

時間 2019-12-20

標籤移動適配問題欄目無線简体版

原文原文鏈接

適配問題

怎麼適配iphone6
1px問題css

爲何頁面與設計稿會出現誤差？

dpr=設備像素/ css像素，只有dpr等於1的時候，實際效果和設計稿的尺寸比例纔是1:1。html

由於iPhone6的DPR（設備像素比）爲2，設備像素爲750，因此iPhone6的理想視口尺寸爲375px。iphone

由於設計稿是基於設備像素，頁面是基於css像素的。css中的寬度是基於理想視口的（寬度375px），設計圖上是基於設備寬度750px，因此尺寸不對。佈局

怎麼處理？

init-scale=0.5 。
缺陷：可是寬度不能自適應字體

⭐️rem大法

基於html標籤的font-size設置的url

手淘的作法：

把縮放尺寸設置成dpr的倒數。scala

讀設備寬度，動態設置meta標籤的 content屬性中的maximun,minimum,user-scable值設計

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 2.66666667rem;
        height: 2.66666667rem;
        background: red;
    }
    </style>
</head>
<body>

    <div class="box"></div>

    <script>
    var scale = 1 / window.devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    </script>
</body>
</html>

網易的作法

如今的設計稿都是750px寬度（p6的寬），那要想實現 css樣式：設計圖=1：100 這種比較方便的折算方式，font-size就要設置成7.5px；code

也就是說1rem = 7.5pxorm

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 2rem;
        height: 2rem;
        background: red;
    }
    </style>
</head>
<body>

    <div class="box"></div>

    <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</body>
</html>

總結

rem是爲了實現移動端自適應佈局。經過在html元素下設置font-size定義。

另外，手淘的作法是經過判斷設備的dpr，將縮放規模scale設置爲dpr的倒數，再用js動態設置meta標籤的content屬性和font-size基準值的大小。

網易的作法是，禁用用戶縮放，scale始終爲1，將font-size設置爲625%，即 1rem=100px。

1px問題

如何實現移動端的1px邊框

方法一：`transformY:scale(50%)`

方法二：

border-width:0 0 2px 0;
border-image:url("xxx.png") 0 0 2 0 stretch // 圖片地址 上下剪切 左右剪切 上下邊寬 左右邊寬 圖片拉伸

vm/vh+rem大法

vm/vh是將來的趨勢

rem方式弊端：須要動態計算根字體大小

作法：用vm/vh來計算根字體大小，剩下的自適應佈局依舊按照rem的方法

用vm/vh作適配頁面

⭐️關於vm/vh

1. 與%百分比的區別

vm/vh 是基於視窗的
%基於父元素

2. 使用場景

隨着頁面不一樣，文字圖片縮小放大（適配頁面）

3. 與rem的區別

vm/vh沒有最大、最小寬大的限制（設備很小的時候，圖文會縮得特別特別小……）

措施：

1.解決背景太小問題

body{
    min-width:xxx px;
    max-width: xxx px;
}

2.媒體查詢限制根文字大小（解決文字太小問題）

html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同時，經過Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }