/**
* sass的基本的使用reset.scss
* base.scss
* domcontentloaded:當dom載入完成
* orientationchange:移動的時候和水平旋轉的時候觸發
* resize:當調整視窗的時候觸發
* 具體的文件的說明
*/// js載入
vardocel = doc.documentelement;
varresizeevt = "orientationchange"
inwindow ? "orientationchange" : "resize";
varrecalc = function ()
if (!clientwidth)
docel.style.fontsize = 312.5 * (clientwidth / 375) + "%"
};if (!doc.addeventlistener)
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener("domcontentloaded", recalc, false);
// 為了防止js載入的問題，需要配合**查詢
// 相容部分機型採用js 設定根節點 font-size 不生效問題
@media
screen
and(min - width: 320px) }
@media
screen
and(min - width: 360px) }
@media
screen
and(min - width: 375px) }
@media
screen
and(min - width: 400px) }
@media
screen
and(min - width: 440px) }
@media
screen
and(min - width: 480px) }
@media
screen
and(min - width: 520px) }
@media
screen
and(min - width: 560px) }
@media
screen
and(min - width: 600px) }
@media
screen
and(min - width: 640px) }
@media
screen
and(min - width: 680px) }
@media
screen
and(min - width: 720px) }
@media
screen
and(min - width: 760px) }
@media
screen
and(min - width: 800px) }
// sass的專案寫法總結
// 基本的使用sass:
// 接下來專案實踐
=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=對應的百分比
移動端適配 適配方案總結
通過特定的限制，控制不同樣式的呈現 限制條件最終返回true false，為真，應用其樣式 12 stylesheet media max width 800px href example.css 34 5操作邏輯 only,and,not 你可以使用邏輯操作符，包括not and和only等，構建...
移動端適配方案總結
瀏覽器的視窗。viewport與跟viewport有關的meta標籤的關係，詳細建議讀一讀這篇文章 移動前端開發之viewport的深入理解，viewport與布局的關係，可以看下這篇文章 在移動瀏覽器中使用viewport元標籤控制布局 visual viewport可見視口 螢幕寬度 layou...
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...