移動端vw適配方案

在移動端適配有很多種方案，有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
>
*.box1
style
>
head
>
<
body
>
<
div 
class
="box1"
>
div>
body
>
html
>

在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
>
*.box1
style
>
head
>
<
body
>
<
div 
class
="box1"
>
div>
body
>
html
>

在ipad上的顯示效果：

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

可以看出，在不同裝置都能佔據一半視口寬度的效果。

但是，設計圖精度到1px,這樣直接用vw就不太現實了

設計圖一般會給出畫素資料但是不會給出vw為單位的資料，所以我們得把px轉化為vw，

那麼我們可以利用rem,

上面設計圖的寬度是750px,那麼100/750vw就是1px了，

利用rem，也就是給html設定字型大小，但是很多瀏覽器並不支援1px的字型大小，所以我們可以設定成

100/750*40vw,也就是1rem等於40px,而且rem的單位也是vw，所以這就可以做到所有裝置了。

使用rem:

假設乙個div在設計圖上的寬度為79px,那麼我們可以這樣設定

div{

79rem/40

當然，css是不支援直接加減乘除的，我們需要借助less

移動端適配方案

最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...

移動端適配方案

先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...

移動端適配方案

尺寸 超小屏 768以下 小屏 768 992 中屏 992 1200 寬屏 1200以上 適配方案 適配細節 在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 i...