mona space ack 窗口 reset 問題 3.3 calc 防止

/** * 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接下來項目實踐

業務線移動端適配方案總結