---

flexible方案原理: <未实验>

---

https://segmentfault.com/a/1190000003101394?_ea=306774

文字用px 剩下用rem

/* media.css */ 就是之前会玲说的那个 
@media screen and (min-width:320px) and (max-width:320px){
    html{ font-size:320 / 320 * $basicRem; }
}
@media screen and (min-width:400px) and (max-width:400px){
    html{ font-size: 400 / 320 * $basicRem; }
}
//如果不知道要兼容什么样的设备。可以再用户访问后，javascript收集该设备的相关信息，然后在服务端自动更新该文件的内容，加入新的@media规则

<meta name="flexible" content="initial-dpr=2" />

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下，仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

---

---

---

flexible方案: <未实验>

---

https://github.com/amfe/article/issues/17

1 导入flexible.js & flexible_css.js

或者直接引用
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
***(建议放在最前 css之上)***

2 文字用px 剩下用rem

rem = 需转换的px值 / 设计稿总宽度px值 * 10 
>http://blog.csdn.net/pwc1996/article/details/75738725

*最好设置最大宽度最小宽度 : max-width: 640px;

---

---

---

vw方案: <未实验>

---

https://www.w3cplus.com/css/vw-for-layout.html

1vw = window.innerWidth * 1%

1vh = window.innerHeihgt * 1%
vmin = (vw < vh ? vw : vh)
vmax = (vw > vh ? vw : vh)

全部用vw (包括文字)

Yvw = x / 设计稿总宽度 * 100
视觉设计稿总宽度750px，那么100vw = 750px，即1vw = 7.5px

特殊情况 1px

https://www.w3cplus.com/css/fix-1px-for-retina.html

---

---