最早手淘flexible是以ip6 750的物理像素为标准，把屏幕分成10分。设置html的字体大小为 x rem.其中x表示1/10的屏幕宽度。不涉及viewport相关的改动。所以假设你没有给页面配置viewport，那你在iphone6上默认viewport 980px，设计师给你一个按照750的设计稿，上面是20px， 你在代码里如果写20px,放到980里可能比例不对。按照flexible的计算方式：
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}，
1. viewport 高清问题、字体
背景： iphone 默认980px的展示，比如iphone6 是375的宽，750的物理像素，但是一个viewport下是代表980px，也就是把375的iphone分成了980分。 这个时候虽然dpr的值是2，但是手机浏览器会重新算，正确的dpr = 750 / 980
引入meta viewport:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />
这里的width和initial-scale的值，就是改了viewport的值，比如ip6就是375了， 这个时候dpr就真是2了，dpr = 750 / 375
三个问题
最早手淘flexible是以ip6 750的物理像素为标准，把屏幕分成10分。设置html的字体大小为 x rem.其中x表示1/10的屏幕宽度。不涉及viewport相关的改动。所以假设你没有给页面配置viewport，那你在iphone6上默认viewport 980px，设计师给你一个按照750的设计稿，上面是20px， 你在代码里如果写20px,放到980里可能比例不对。按照flexible的计算方式： // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' }，
750 / 10 = 75. 20 / 75 rem