移動端vw適配方案

本文轉載自查看原文 2020-09-04 12:11 2062 CSS

　　在移動端適配有很多種方案，有flex布局，百分比布局，響應式布局，還有vw布局，

下面講解以下vw布局：

　　首先我們得明確vw是什么？

　　　　vw　　viewpoint width，視窗寬度，1vw=視窗寬度的1%

　　　　vw是一種css單位。1vw相當於視窗寬度的1%,100vw相當於100%.

這種布局和百分比布局有點類似。

　　我們先來說下移動端網頁適配的難點在哪里，

　　　　由於移動端設配像素高，屏幕小，導致PC端網頁直接在移動端顯示效果很差，例：

　　　　移動端瀏覽器視窗大小默認為980css像素，這是為了兼容PC端的網頁，但是這種顯示效果並不好

　　　　所以我們在開發移動端網頁的時候往往根據最佳視口來設計，也就是根據每台屏幕的大小分辨率不同而設定不一樣的CSS像素，以保證良好的用戶體驗

　　　　在頭部標簽加入下面這一句就可以讓不同設備的瀏覽器的視口取最佳CSS像素

但是，這又會產生新的問題，不同設備的瀏覽器CSS像素不一樣，如果按傳統的PC端網頁來開發，那么就會有以下適配問題：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box1{
            width: 187.5px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
</body>
</html>

以上網頁在iphone6/7/8顯示效果：

在iPad上的顯示效果：

在iphone5/5s/se的顯示效果：

很明顯直接用單純的px為像素是不適合的，這樣會給很多設備帶來很差的用戶體驗

所以我們以下介紹用vw適配來解決，上面一開頭就說明了vw是什么。

　　　　vw　　viewpoint width，視窗寬度，1vw=視窗寬度的1%

以上代碼我們用vw來適配，看下效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box1{
            width: 50vw;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
</body>
</html>