/**
* sass的基本的使用reset.scss
* base.scss
* DOMContentLoaded:当Dom加载完成
* orientationchange:移动的时候和水平旋转的时候触发
* resize:当调整窗口的时候触发
* http://feg.netease.com/archives/570.html 具体的文档的说明
*/
// js加载 var docEl = doc.documentElement; var resizeEvt = "orientationchange" in window ? "orientationchange" : "resize"; var recalc = function () { var clientWidth = docEl.clientWidth; if (clientWidth >= 360 && clientWidth < 375) { clientWidth = 375 } if (!clientWidth) { return } docEl.style.fontSize = 312.5 * (clientWidth / 375) + "%" }; if (!doc.addEventListener) { return } win.addEventListener(resizeEvt, recalc, false); doc.addEventListener("DOMContentLoaded", recalc, false);
// 为了防止js加载的问题，需要配合媒体查询
// 兼容部分机型采用js 设置根节点 font-size 不生效问题
@media screen and (min-width: 320px) { html{ font-size: 266.667%; } }
@media screen and (min-width: 360px) { html{ font-size: 312.5%; } }
@media screen and (min-width: 375px) { html{ font-size: 312.5%; } }
@media screen and (min-width: 400px) { html{ font-size: 333.333%; } }
@media screen and (min-width: 440px) { html{ font-size: 366.667%; } }
@media screen and (min-width: 480px) { html{ font-size: 400%; } }
@media screen and (min-width: 520px) { html{ font-size: 433.333%; } }
@media screen and (min-width: 560px) { html{ font-size: 466.667%; } }
@media screen and (min-width: 600px) { html{ font-size: 500%; } }
@media screen and (min-width: 640px) { html{ font-size: 533.333%; } }
@media screen and (min-width: 680px) { html{ font-size: 566.667%; } }
@media screen and (min-width: 720px) { html{ font-size: 600%; } }
@media screen and (min-width: 760px) { html{ font-size: 633.333%; } }
@media screen and (min-width: 800px) { html{ font-size: 666.667%; } }
// SASS的项目写法总结
// 基本的使用SASS:
// http://www.ruanyifeng.com/blog/2012/06/sass.html接下来项目实践
(1)以iphone6作为参照，iphone6的宽度是375px，dpr为2，所以对于上面显示的375px的图，我们需要的图片大小是750px，所以我们拿到的psd设计图的宽度必须是750px。为了方便书写rem，我们希望psd设计图上750px对应的rem是7.5rem。而设计图上面750px在iphone6上面的实际大小是375px，所以我们需要设置iphone6的font-size=375/7.5px=50px。更一般地，由于移动端的font-size的默认值是16px，所以我们更倾向于用一个百分比来设置font-size：font-size=50/16=312.5%。(注意：用px和百分比没有本质上的不同。)
deviceWidth = 320，font-size = 320 / 7.5= 42.667px
deviceWidth = 375，font-size = 375 / 7.5 = 50px
deviceWidth = 414，font-size = 414 / 7.5 = 55.2px
deviceWidth = 500，font-size = 500 / 7.5= 66.667px生成对应的百分比，
fontSize/16=对应的百分比