移动端web

最新推荐文章于 2024-09-20 16:09:42 发布

weixin_34405925

最新推荐文章于 2024-09-20 16:09:42 发布

阅读量82

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3040505/blog/1587755

版权

2019独角兽企业重金招聘Python工程师标准>>>

未经同意请勿转载：

第一步：建css文件和less文件，将两个通过kaola绑定。
第二步：在less文件里面设变量@r: 100rem;

注：less用于计算px到rem。

lg：less 文件中写入margin:100/@r;

css文件中将自动更新为rem。
第三步：将rem.js引入。
第四步：html文件加：<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">

下面为rem.js代码：

!function (window) {
	/* 设计图文档宽度 */
	var docWidth = 750;
	var doc = window.document,
	    docEl = doc.documentElement,
	    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);

转载于:https://my.oschina.net/u/3040505/blog/1587755