以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值 ...