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

/**

* 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: 320 px) { html{ font - size: 266.667 %; } }

@ media screen and( min - width: 360 px) { html{ font - size: 312.5 %; } }

@ media screen and( min - width: 375 px) { html{ font - size: 312.5 %; } }

@ media screen and( min - width: 400 px) { html{ font - size: 333.333 %; } }

@ media screen and( min - width: 440 px) { html{ font - size: 366.667 %; } }

@ media screen and( min - width: 480 px) { html{ font - size: 400 %; } }

@ media screen and( min - width: 520 px) { html{ font - size: 433.333 %; } }

@ media screen and( min - width: 560 px) { html{ font - size: 466.667 %; } }

@ media screen and( min - width: 600 px) { html{ font - size: 500 %; } }

@ media screen and( min - width: 640 px) { html{ font - size: 533.333 %; } }

@ media screen and( min - width: 680 px) { html{ font - size: 566.667 %; } }

@ media screen and( min - width: 720 px) { html{ font - size: 600 %; } }

@ media screen and( min - width: 760 px) { html{ font - size: 633.333 %; } }

@ media screen and( min - width: 800 px) { 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=對應的百分比