视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
移动端web页面自适应:rem的运用
2020-11-27 18:52:02 责编:小采
文档


web页面的自适应开发,要求就是跨平台,跨浏览器,一般mobile+pc,前几天写了几个pc端全屏页面,用的是百分比,在手机上看了下效果 相去甚远。这么看来mobile+pc 的自适应 有些时候就是个伪命题。

那对于移动端的自适应就 一般的宣传页面全屏滑动那种,用百分比,若复杂了就肯定不行,仔细看了下某淘的处理用的rem为单位,就学习在这个方法吧首先对于设计图,width 一般是0的。

rem:CSS3新增了一个相对单位rem(root em,根em),这样rem 就应该设定在html{font-size:1rem;},
某淘对此的设定是根据手机宽度设定的,
必不可少的这句:<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">由js 控制的 。

首先是在苹果上不一样,苹果6就是<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
这样设置可以用 window.devicePixelRatio 设备像素比
window.clientWitdh*window.devicePixelRatio/10 ,这样就得出了font-size大小,
而andorid上有大部分就是、
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

font-size就是 window.clientWitdh/10;

淘宝里使用的代码:

!function(J, I) {

 function H() {
 var d = E.getBoundingClientRect().width;
 d / B > 540 && (d = 540 * B);
 var e = d / 10;
 E.style.fontSize = e + "px",
 z.rem = J.rem = e;
 }
 var G, F = J.document,
 E = F.documentElement,
 D = F.querySelector('meta[name="viewport"]'),
 C = F.querySelector('meta[name="flexible"]'),
 B = 0,
 A = 0,
 z = I.flexible || (I.flexible = {});
 if (D) {
 console.warn("将根据已有的meta标签来设置缩放比例");
 var y = D.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
 y && (A = parseFloat(y[1]), B = parseInt(1 / A))
 } else {
 if (C) {
 var x = C.getAttribute("content");
 if (x) {
 var w = x.match(/initial\-dpr=([\d\.]+)/),
 v = x.match(/maximum\-dpr=([\d\.]+)/);
 w && (B = parseFloat(w[1]), A = parseFloat((1 / B).toFixed(2))),
 v && (B = parseFloat(v[1]), A = parseFloat((1 / B).toFixed(2)))
 }
 }
 }
 if (!B && !A) {
 var u = (J.navigator.appVersion.match(/android/gi), J.navigator.appVersion.match(/iphone/gi)),
 t = J.devicePixelRatio;
 B = u ? t >= 3 && (!B || B >= 3) ? 3 : t >= 2 && (!B || B >= 2) ? 2 : 1 : 1,
 A = 1 / B
 }
 if (E.setAttribute("data-dpr", B), !D) {
 if (D = F.createElement("meta"), D.setAttribute("name", "viewport"), D.setAttribute("content", "initial-scale=" + A + ", maximum-scale=" + A + ", minimum-scale=" + A + ", user-scalable=no"), E.firstElementChild) {
 E.firstElementChild.appendChild(D)
 } else {
 var s = F.createElement("p");
 s.appendChild(D),
 F.write(s.innerHTML)
 }
 }
 J.addEventListener("resize",
 function() {
 clearTimeout(G),
 G = setTimeout(H, 300)
 },
 !1),
 J.addEventListener("pageshow",
 function(b) {
 b.persisted && (clearTimeout(G), G = setTimeout(H, 300))
 },
 !1),
 "complete" === F.readyState ? F.body.style.fontSize = 12 * B + "px": F.addEventListener("DOMContentLoaded",
 function() {
 F.body.style.fontSize = 12 * B + "px"


 },
 !1),
 H(),
 z.dpr = J.dpr = B,
 z.refreshRem = H,
 z.rem2px = function(d) {
 var c = parseFloat(d) * this.rem;
 return "string" == typeof d && d.match(/rem$/) && (c += "px"),
 c
 },
 z.px2rem = function(d) {
 var c = parseFloat(d) / this.rem;
 return "string" == typeof d && d.match(/px$/) && (c += "rem"),
 c
 }
} (window, window.lib || (window.lib = {}));
下载本文
显示全文
专题