適配問題

怎么適配iphone6

1px問題

為什么頁面與設(shè)計(jì)稿會出現(xiàn)偏差？

dpr=設(shè)備像素/ css像素，只有dpr等于1的時(shí)候，實(shí)際效果和設(shè)計(jì)稿的尺寸比例才是1:1。

因?yàn)閕Phone6的DPR(設(shè)備像素比)為2，設(shè)備像素為750，所以iPhone6的理想視口尺寸為375px。

因?yàn)樵O(shè)計(jì)稿是基于設(shè)備像素，頁面是基于css像素的。css中的寬度是基于理想視口的(寬度375px)，設(shè)計(jì)圖上是基于設(shè)備寬度750px，所以尺寸不對。

怎么處理？

init-scale=0.5 。

缺陷：但是寬度不能自適應(yīng)

??rem大法

基于html標(biāo)簽的font-size設(shè)置的

手淘的做法：

把縮放尺寸設(shè)置成dpr的倒數(shù)。

讀設(shè)備寬度，動態(tài)設(shè)置meta標(biāo)簽的 content屬性中的maximun,minimum,user-scable值

body{

margin: 0;

padding: 0;

}

.box{

width: 2.66666667rem;

height: 2.66666667rem;

background: red;

}

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';

網(wǎng)易的做法

現(xiàn)在的設(shè)計(jì)稿都是750px寬度(p6的寬)，那要想實(shí)現(xiàn) css樣式：設(shè)計(jì)圖=1：100 這種比較方便的折算方式，font-size就要設(shè)置成7.5px；

也就是說1rem = 7.5px

body{

margin: 0;

padding: 0;

}

.box{

width: 2rem;

height: 2rem;

background: red;

}

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

總結(jié)

rem是為了實(shí)現(xiàn)移動端自適應(yīng)布局。通過在html元素下設(shè)置font-size定義。

另外，手淘的做法是通過判斷設(shè)備的dpr，將縮放規(guī)模scale設(shè)置為dpr的倒數(shù)，再用js動態(tài)設(shè)置meta標(biāo)簽的content屬性和font-size基準(zhǔn)值的大小。

網(wǎng)易的做法是，禁用用戶縮放，scale始終為1，將font-size設(shè)置為625%，即 1rem=100px。

1px問題

如何實(shí)現(xiàn)移動端的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方式弊端：需要動態(tài)計(jì)算根字體大小

做法：用vm/vh來計(jì)算根字體大小，剩下的自適應(yīng)布局依舊按照rem的方法

??關(guān)于vm/vh

1. 與%百分比的區(qū)別

vm/vh 是基于視窗的

%基于父元素

2. 使用場景

隨著頁面不同，文字圖片縮小放大(適配頁面)

3. 與rem的區(qū)別

vm/vh沒有最大、最小寬大的限制(設(shè)備很小的時(shí)候，圖文會縮得特別特別小……)

措施：

1.解決背景過小問題

body{

min-width:xxx px;

max-width: xxx px;

}

2.媒體查詢限制根文字大小(解決文字過小問題)

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

總結(jié)

以上是生活随笔為你收集整理的Html百分比设宽偏差大,前端开发之移动端适配详细讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。