vue寫h5頁面的方法總結

下面就是小編帶給大家的如何用vue寫h5頁面方法操作，希望能夠給你們帶來一定的幫助，謝謝大家的觀看。

1、當拿到設計師給的UI設計圖，前端的首要任務就是布局和樣式，相信這對于大部分前端工程師來說已經不是什么難題了。移動端的布局相對PC較為簡單，關鍵在于對不同設備的適配。

2、之前介紹了一篇關于移動端rem布局方案，這大致是網易H5的適配方案。不過實踐中發現淘寶開源的可伸縮布局方案效果更好且更容易使用。方案總結為：根據屏幕大小 / 750 = 所求字體 / 基準字體大小比值相等，動態調節html的font-size大小。

3、方案總結為：根據設備設備像素比設置scale的值，保持視口device-width始終等于設備物理像素，接著根據屏幕大小動態計算根字體大小，具體是將屏幕劃分為10等分，每份為a，1rem就等于10a。

4、通常我們會拿到750寬的設計稿，這是基于iPhone6的物理分辨率。有的設計師也許會偷懶，設計圖上面沒有任何的標注，如果我們邊開發邊量尺寸，無疑效率是比較低的。要么讓設計師標注上，要么自食其力。

5、如果設計師實在沒有時間，推薦使用markman進行標注，免費版閹割了一些功能（比如無法保存本地）不過基本滿足了我們的需求了。

6、標注完成后開始寫我們的樣式，使用了淘寶的lib-flexible庫之后，我們的根字體基準值就為750/100*10 = 75px。此時我們從圖中若某個標注為100px，那么css中就應該設置為100/75 = 1.333333rem。所以為了提高開發效率，可以使用px轉化為rem的插件。如果你使用sublimeText，可以用 rem-unit。

如果大家學習后有任何疑問可以在下面的留言區討論，感謝大家對腳本之家的支持。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com