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