手机端rem布局

https://github.com/amfe/lib-flexible

https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

http://www.cnblogs.com/well-nice/p/5509589.html
https://www.w3cplus.com/css3/css-grid-flexbox-solving-real-world-problems.html
html的font-size、
https://design.google.com/devices/ 科学上网
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
demo
http://huodong.m.taobao.com/act/yibo.html

rem-6.jpg

视窗 viewport

https://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport
https://www.w3cplus.com/css/viewports.html

物理像素(physical pixel)

又被称为设备像素，设备中一个最微小的物理部件

设备独立像素(density-independent pixel)

也称为密度无关像素，计算机坐标系统中的一个点

CSS像素

CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs著作权归作者所有。

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。

设备像素比(device pixel ratio)

设备像素比简称为dpr

设备像素比 ＝ 物理像素 / 设备独立像素

JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr
CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

meta标签

CSS单位rem

font size of the root element.
rem就是相对于根元素的font-size来做计算

字号不使用rem

header,footer{
height:.90rem;
}

//字号单独用px即可 ，这里建议大家用变量定义小中大正常集中字号常量就可以，不用每次去针对具体样式做字号调整。
@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}
//设置基本的字号,基本元素取材除100即可得到rem的大小，当然也可以用16px换算改变根字号为6.25rem即可。因为还有很大比例的手机设计为320的，所以这里考虑为640的。当屏幕大于640的时候，不再放大，让页面处于水平居中640px显示。
function fontAuto(){
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
}
fontAuto();
window.onresize=function(){
fontAuto();
}

动态设置viewport的scale

js中可以通过devicePixelRatio拿到具体的设备像素比值

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

动态设置font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

//根据屏幕大小及dpi调整缩放和大小
(function() {
var scale = 1.0;
var ratio = 1;
if (window.devicePixelRatio >= 2) {
scale *= 0.5;
ratio *= 2;
}
var text = '';
document.write(text);
document.documentElement.style.fontSize = 50*ratio + "px";
})();

响应式布局
@media (max-width:768px){
//css
}

function changeViewport(){
    // UI-width ：WebApp布局宽度
    // device-width ：屏幕分辨率宽度
    // target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;
    var uiWidth = 750,
        deviceWidth = (window.orientation == 90 || window.orientation == -90) ? window.screen.height : window.screen.width;
        devicePixelRatio = window.devicePixelRatio || 1;

    var myScale = deviceWidth / uiWidth;
    var targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;
    //alert(uiWidth+","+deviceWidth+","+devicePixelRatio+","+myScale+","+targetDensitydpi);
    var viewportContent = "initial-scale=" + myScale + ", maximum-scale=" + myScale + ", minimum-scale=" + myScale + ',target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no';
    //var viewportContent = "initial-scale=" + myScale + ", maximum-scale=" + myScale + ", minimum-scale=" + myScale + ', width=device-width, user-scalable=no';
    document.querySelector('meta[name=viewport]').attributes['content'].value = viewportContent;
}

window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    changeViewport();
}, false);
changeViewport();