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