資訊專欄INFORMATION COLUMN
摘要：看了源碼，不懂為什么對于沒有縮放，而是粗放設(shè)置，導(dǎo)致很不精細(xì)，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點(diǎn)，再回顧吧。本質(zhì)上就是把設(shè)置成物理像素大小，再縮小到屏幕獨(dú)立像素這么大限制最大為
看了 flexible 源碼，不懂為什么對于android 沒有縮放，而是粗放設(shè)置，導(dǎo)致 android 很不精細(xì)，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點(diǎn)，再回顧吧。
本質(zhì)上就是把 viewport 設(shè)置成物理像素大小，再縮小到屏幕獨(dú)立像素這么大
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector("meta[name="viewport"]");
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
}
if (!dpr && !scale) {
dpr = win.devicePixelRatio || 1;
scale = 1 / dpr;
}
docEl.setAttribute("data-dpr", dpr);
if (!metaEl) {
metaEl = doc.createElement("meta");
metaEl.setAttribute("name", "viewport");
metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// 限制 rem 最大為 54px * dpr
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + "px";
flexible.rem = win.rem = rem;
}
win.addEventListener("resize", function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = 12 * dpr + "px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = 12 * dpr + "px";
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === "string" && d.match(/rem$/)) {
val += "px";
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === "string" && d.match(/px$/)) {
val += "rem";
}
return val;
}
})(window, window["lib"] || (window["lib"] = {}));
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80773.html
摘要：看了源碼，不懂為什么對于沒有縮放，而是粗放設(shè)置，導(dǎo)致很不精細(xì)，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點(diǎn)，再回顧吧。本質(zhì)上就是把設(shè)置成物理像素大小，再縮小到屏幕獨(dú)立像素這么大限制最大為 看了 flexible 源碼，不懂為什么對于android 沒有縮放，而是粗放設(shè)置，導(dǎo)致 android 很不精細(xì)，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點(diǎn)，再...
摘要：看了源碼，不懂為什么對于沒有縮放，而是粗放設(shè)置，導(dǎo)致很不精細(xì)，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點(diǎn)，再回顧吧。本質(zhì)上就是把設(shè)置成物理像素大小，再縮小到屏幕獨(dú)立像素這么大限制最大為 看了 flexible 源碼，不懂為什么對于android 沒有縮放，而是粗放設(shè)置，導(dǎo)致 android 很不精細(xì)，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點(diǎn)，再...
摘要：更改文件名之后，在文件中寫入的代碼?？刂圃黾忧熬Y的版本根據(jù)頁面中的標(biāo)簽及標(biāo)簽中的選擇器屬性，來精簡樣式。 項(xiàng)目地址 既然重新學(xué)習(xí)了 Gulp，那索性就再把以前用 Gulp 寫的東西拿出來，重新寫一遍。這次寫的時(shí)候要把要點(diǎn)記錄下來，不然以后忘了就沒法回憶了。 因?yàn)?Gulp 現(xiàn)在使用沒有以前那么多了，所以就不寫復(fù)雜的應(yīng)用了。這次寫一個(gè)簡單的 Demo 處理工具，只是為了把 PSD 轉(zhuǎn)成 ...
摘要：下載或在項(xiàng)目中引入一般情況在中引入設(shè)置標(biāo)簽視情況而定安裝或在中配置，在項(xiàng)目文件中找到，將添加到中，，下的根據(jù)設(shè)計(jì)稿而定具體如下編譯新加由于設(shè)計(jì)稿是添加到里面省略項(xiàng)目中使用假設(shè)設(shè)計(jì)稿和分別是，具體代碼 1.下載lib-flexible npm i lib-flexible --save 或 yarn add lib-flexible 2.在項(xiàng)目中引入lib-flexible 一般情況在...
閱讀 3466·2019-08-30 15:44
閱讀 807·2019-08-30 13:46
閱讀 2095·2019-08-30 11:05
閱讀 3343·2019-08-29 18:32
閱讀 2165·2019-08-29 13:56
閱讀 1303·2019-08-29 12:57
閱讀 770·2019-08-28 18:21
閱讀 1754·2019-08-26 12:16
