只是为了自己以后查找方便，看不懂勿怪
DPI、PPI：屏幕像素密度或屏幕每英寸的像素数量
dips：手机尺寸或独立像素
物理像素 = 手机分辨率
dpr = window.devicePixelRatio（js可以拿到）
css定义
psd转换rem单位
rem = px / 基准值
基准值 = 手机宽高 * dpr / 10
乘以dpr是因为页面有可能缩放
除以10是为了取整，方便计算(可以是任何值)
以下是js设置meta的缩放和font-size
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
scale = 1 / dpr;
rem = docEl.clientWidth * dpr / 10;
// 设置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.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v); return v * rem; }; window.px2rem = function(v) { v = parseFloat(v); return v / rem; }; window.dpr = dpr; window.rem = rem;版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232677.html原文链接：https://javaforall.net
