/**
* 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接下来项目实践
