溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
下面就是小編帶給大家的如何用vue寫h6頁面方法操作，希望能夠給你們帶來一定的幫助，謝謝大家的觀看。
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。
如果大家學習后有任何疑問可以在下面的留言區討論，感謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
