84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
标注图 (分辨率 750* 1334)中字体,间距单位是 px ,基于物理像素
如何兼容低分辨率的 iPhone 5 和 iPhone 4,以及众多 android 设备
补充:最终使用了天猫的 lib-flexible 方案
认证高级PHP讲师
使用Flexible实现手淘H5页面的终端适配
重构页面时候用rem
大概是这个意思。
(function (window) { var dpr, rem, scale, timeout; var docEl = document.documentElement; var metaEl = document.querySelector('meta[name="viewport"]'); dpr = window.devicePixelRatio || 1; rem = docEl.clientWidth * 2 / 10; scale = 1 / dpr; // 设置viewport,进行缩放,达到高清效果 metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 设置data-dpr属性,留作的css hack之用 docEl.setAttribute('data-dpr', dpr); // 动态写入样式 docEl.style.fontSize = rem + "px"; // docEl.firstElementChild.appendChild(fontEl); // fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; // 给js调用的,某一dpr下rem和px之间的转换函数 //rem转px window.rem2px = function (v) { v = parseFloat(v); return v * rem; }; //px转rem window.px2rem = function (v) { v = parseFloat(v); return v / rem; }; window.dpr = dpr; window.rem = rem; })(window) console.log(window.rem2px(75) )
你可以看看这个~就是你要的!从网易与淘宝的font-size思考前端设计稿与工作流
小司项目里使用rem值,通过对js计算设备的宽度值来设定一个比例.css用的rem值会根据这个比例来缩放,当然难免会有一点误差在的。
使用Flexible实现手淘H5页面的终端适配
重构页面时候用rem
大概是这个意思。
你可以看看这个~就是你要的!
从网易与淘宝的font-size思考前端设计稿与工作流
小司项目里使用rem值,通过对js计算设备的宽度值来设定一个比例.css用的rem值会根据这个比例来缩放,当然难免会有一点误差在的。