---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

rem单位换算

前端开发 蚂蚁 4480℃ 0评论

移动前端自适应适配布局解决方案和比较
px转rem提示功能指南(HBuilder7.5.2以后含此功能)
https://github.com/imochen/hotcss
https://github.com/amfe/lib-flexible
移动端rem适配方案小记
假如我用这段代码

! function(win) {
	function resize() {
		var deviceWidth = document.documentElement.clientWidth;
		if(deviceWidth > 1080) deviceWidth = 1080;
		document.documentElement.style.fontSize = deviceWidth / 10.8 + 'px';
	}
	var v, initial_scale, timeCode, dom = win.document,
		domEle = dom.documentElement,
		viewport = dom.querySelector('meta[name="viewport"]'),
		flexible = dom.querySelector('meta[name="flexible"]');
	if(viewport) {
		//viewport:
		var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
		if(o) {
			initial_scale = parseFloat(o[2]);
			v = parseInt(1 / initial_scale);
		}
	} else {
		if(flexible) {
			var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
			if(o) {
				v = parseFloat(o[2]);
				initial_scale = parseFloat((1 / v).toFixed(2))
			}
		}
	}
	if(!v && !initial_scale) {
		var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
		v = win.devicePixelRatio;
		v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
	}
	//没有viewport标签的情况下
	if(domEle.setAttribute("data-dpr", v), !viewport) {
		if(viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {
			domEle.firstElementChild.appendChild(viewport)
		} else {
			var m = dom.createElement("div");
			m.appendChild(viewport), dom.write(m.innerHTML)
		}
	}
	win.dpr = v;
	win.addEventListener("resize", function() {
		clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
	}, false);
	win.addEventListener("pageshow", function(b) {
		b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
	}, false);
	/* 个人觉得没必要完成后就把body的字体设置为12
	"complete" === dom.readyState ? dom.body.style.fontSize = 12 * v + "px" : dom.addEventListener("DOMContentLoaded", function() {
	 //dom.body.style.fontSize = 12 * v + "px"
	}, false);
	*/
	resize();
}(window);

这里是设计图是1080的时候.在HBuilder里面设置px转rem的比例为100就好了,其他尺寸的更改相应参数.sublime也有自动转换插件

/**
 * 可伸缩布局方案
 * rem计算方式:设计图尺寸px / 100 = 实际rem  例: 100px = 1rem
 */
!(function(window) {
  /* 设计图文档宽度 */
  var docWidth = 750

  var doc = window.document
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

  var recalc = (function refreshRem() {
    var clientWidth = docEl.getBoundingClientRect().width

    /* 8.55:小于320px不再缩小,11.2:大于420px不再放大 */
    docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'

    return refreshRem
  })()

  /* 添加倍屏标识,安卓倍屏为1 */
  docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1)

  if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
    /* 添加IOS标识 */
    doc.documentElement.classList.add('ios')
    /* IOS8以上给html添加hairline样式,以便特殊处理 */
    if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) { doc.documentElement.classList.add('hairline') }
  }

  if (!doc.addEventListener) return
  window.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
}(window))

转载请注明:有爱前端 » rem单位换算

喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情
(2)个小伙伴在吐槽
  1. http://caibaojian.com/mobile-responsive-example.html
    蚂蚁2018-04-02 13:43 回复
  2. https://github.com/amfe/lib-flexible
    蚂蚁2018-04-02 13:56 回复