移動端頁面尺寸適配

2022-07-25 21:21:12 字數 2316 閱讀 6245

以iphone6設計圖為基準

做法一:

<

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

.box

style

>

head

>

<

body

>

<

div

class

="box"

>

div>

<

script

>

document.documentelement.style.fontsize

=document.documentelement.clientwidth

/7.5+'

px'; //

這個7.5是設計稿的寬度除以100得到的(如果以iphone5設計圖為基準,7.5 => 6.4)

script

>

body

>

html

>

做法二:

<

html

>

<

head

>

<

title

>

title

>

<

meta

charset

="utf-8"

/>

<

meta

name

="viewport"

content

=""/>

<

style

>

body

.box

style

>

head

>

<

body

>

<

div

class

="box"

>

div>

<

script

>

//通過裝置畫素比算出縮放比率

varscale =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'

; //

10是定死的乙個值,這是和網易有很大的區別(不過網易沒有動態修改視口縮放比率)

script

>

body

>

html

>

兩者頁面元素尺寸都以rem為單位,但是文字字型大小不要使用rem換算,

而是使用**查詢來進行動態設定,比如下面的**就是網易的**:

@media screen and (max-width: 321px) }

@media screen and (min-width: 321px) and (max-width:400px) }

@media screen and (min-width: 400px) }

或者:

@media screen and (max-width: 321px) }

@media screen and (min-width: 321px) and (max-width:400px) }

@media screen and (min-width: 400px) }

移動端頁面的適配

一 關於viewport設定 二 關於不同裝置rem大小的計算,以及動態設定畫素縮放比 function setsize 三 koala將less轉義為css的運用 設計稿寬度為 750px,與iphone6為整倍數關係,故選iphone6為除錯裝置。選擇除錯裝置時,最好選擇與設計稿寬度成整倍數的裝...

移動端 Web頁面適配

由於手機機型較多,各個手機的螢幕尺寸不一樣,所以做移動端頁面,需要考慮在安卓和ios的各種尺寸裝置的相容問題,我們要做的 web 頁面適配,就是為了在不同裝置上,頁面能夠保持統一展示效果,或等比縮放。常見的移動適配方案有以下幾種 2.1 viewport 可視區 最初手機端需要照顧 pc 端,如果不...

移動端 移動端頁面適配方案

這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說,rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...