84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
标注图 (分辨率 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值会根据这个比例来缩放,当然难免会有一点误差在的。