成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

H5屏幕適配小總結(jié)

JerryZou / 1178人閱讀

摘要：手淘下，，分了份字體不適合使用計(jì)算不同點(diǎn)網(wǎng)易的方法比較便于計(jì)算，淘寶復(fù)雜一些。網(wǎng)易的適配在添加第三方插件的時(shí)候，相對(duì)方便，淘寶因?yàn)槿挚s放，會(huì)影響第三方插件的樣式。

兩個(gè)門派 根據(jù)屏幕寬度設(shè)置 rem 
計(jì)算方式：
rem 根據(jù)屏幕寬度計(jì)算：屏幕寬度越大，元素的尺寸越大。

可以把網(wǎng)頁想象成一張等比縮放的圖片，當(dāng)你屏幕寬度增大，圖片被拉寬，同時(shí)高度也會(huì)等比例增長(zhǎng)。
以iPhone6為例，假設(shè)1rem = 100px， 一個(gè)寬度 100px 的 div 在 iPhone6 （750px）下就是 1rem，iPhone6plus (828px)下就是 1rem = 110px;

這個(gè)門派細(xì)分的話還有兩個(gè)分支，我們分別以網(wǎng)易和手淘為例

不設(shè)置viewpoint

參考網(wǎng)易：
iPhone6（2dpr）和iPhone6plus（3dpr）的寬度下，兩者1rem分別為50px和55.2px，兩者比例為 750 / 828 ，dpr沒有參與計(jì)算；head中的viewport縮放一直是1。
具體來看 rem 的使用

上圖中的圖片元素的高度設(shè)置為1.4rem，可知其在設(shè)計(jì)稿中的高度為140px，那為什么實(shí)際顯示為 70px 呢？其實(shí)仔細(xì)一看，html 元素的 font-size 被設(shè)置成了 50px !那為什么html上的font-size是50px呢？我的理解是：因?yàn)樵O(shè)計(jì)稿是2倍圖，實(shí)際高度要除以2才行，高度為140px 的元素，其實(shí)要寫成 .7rem，但每次計(jì)算樣式都要除以2，太麻煩了，換個(gè)思路，如果直接將 rem 除以 2，那么計(jì)算尺寸時(shí)，只需要除以 100 即可，一勞永逸，提高了開發(fā)效率

設(shè)置viewport

參考手淘：

iPhone6 下，1rem = 75px；

iPhone6plus 下，1rem = 124.2px。 750 (828 / 750) = 82.8px，再根據(jù)dpr縮放，82.8px (3/2) = 124.2px。

為什么82.8px還要乘以1.5呢？因?yàn)槭痔栽趘iewport上面做了處理，頁面整體縮小為i6尺寸的2/3，因此需要在單位尺寸上增加等比例的大小。

在寫樣式的時(shí)候，PS上量出的尺寸除以75。。。

還有坑爹的地方是，字體大小font-size一般情況下不適合跟隨寬度縮放，可能只能寫媒體查詢。

網(wǎng)易和淘寶兩者共同之處

兩者都有一個(gè)共同的特點(diǎn)：可以把rem當(dāng)作類似vw來用，因?yàn)樗麄兌及褜挾鹊确至恕?/p>

網(wǎng)易：i6下，1rem = 100px ，7.5rem = 750px; 分了7.5份。

手淘：i6下，1rem = 75px，10rem = 750px；分了10份；

字體不適合使用rem計(jì)算

不同點(diǎn)：

網(wǎng)易的方法比較便于計(jì)算，淘寶復(fù)雜一些。

網(wǎng)易的適配在添加第三方插件的時(shí)候，相對(duì)方便，淘寶因?yàn)槿挚s放，會(huì)影響第三方插件的樣式。

淘寶的方法可以輕松實(shí)現(xiàn)1px border，而網(wǎng)易需要特殊處理。

整合兩者？

目的：方便計(jì)算 + viewprot縮放

在網(wǎng)易的基礎(chǔ)上改進(jìn)計(jì)算方法：

i6下，1rem等于100px，viewport縮放0.5；

6p下，由于寬度變大：100px 1.104 = 110.4px;又有viewpoint縮放：110.4px 1.5 = 165.6px，1rem = 165.6px；

例子：

點(diǎn)我

根據(jù) DPR 設(shè)置 rem 
計(jì)算方式：
dpr越大，手機(jī)的屏幕越大，看到的范圍越廣，尺寸和dpr相關(guān)。

一般情況下dpr和 rem 的關(guān)系為：

dpr1 ==> 50px

dpr2 ==> 100px

dpr3 ==> 150px

看例子中的代碼來理解

dpr = 2時(shí)：

dpr = 3時(shí)：

總結(jié) 
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement("style");
var metaEl = document.querySelector("meta[name="viewport"]");

dpr = window.devicePixelRatio || 1;

//IP6的設(shè)計(jì)稿，rem=100px，dpr=2,縮放0.5;
rem = 100 * dpr / 2;


//rem = docEl.clientWidth * dpr / 10;
//rem = docEl.clientWidth / 6.4; //相對(duì)于640  100px
scale = 1 / dpr;

// 設(shè)置viewport，進(jìn)行縮放，達(dá)到高清效果,  iphone6為例  物理像素750 css像素375，將視口寬度設(shè)置兩倍，在縮小
metaEl.setAttribute("content", "width=" + dpr * docEl.clientWidth + ",initial-scale=" + scale + ",maximum-scale=" + scale + ", minimum-scale=" + scale + ",user-scalable=no");

// 設(shè)置data-dpr屬性，留作的css hack之用
docEl.setAttribute("data-dpr", dpr);

// 動(dòng)態(tài)寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = "html{font-size:" + rem + "px!important;}";

// 給js調(diào)用的，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)
window.rem2px = function (v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function (v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112019.html

相關(guān)文章

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開發(fā)在早期占領(lǐng)了大多...

    terro 評(píng)論0 收藏0

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開發(fā)在早期占領(lǐng)了大多...

    pepperwang 評(píng)論0 收藏0

  • vue移動(dòng)端h5頁面根據(jù)屏幕適配的四種方案

    摘要：在移動(dòng)端頁面當(dāng)中，其中適配是經(jīng)常會(huì)遇到的問題，這塊主要有死個(gè)方法可以適用。目前全網(wǎng)找或者是嘗試來看，確實(shí)沒有一個(gè)十全十美的適配的解決方案，只能不斷在實(shí)踐應(yīng)用當(dāng)中慢慢填坑最近做了兩個(gè)關(guān)于h5頁面對(duì)接公眾號(hào)的項(xiàng)目，不得不提打開微信瀏覽器內(nèi)置地圖導(dǎo)航的功能確實(shí)有點(diǎn)惡心。下次想起來了的話，進(jìn)行總結(jié)分享一下如何處理。在vue移動(dòng)端h5頁面當(dāng)中，其中適配是經(jīng)常會(huì)遇到的問題，這塊主要有死個(gè)方法可以適用。 ...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<