---- 淘宝优惠券 ----另:可接前端私活,有意请联系qq:116151293或留言!

rem单位换算

前端开发 蚂蚁 2582℃ 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单位换算

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

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(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 回复