vue寫h5頁面的方法總結(jié)
下面就是小編帶給大家的如何用vue寫h5頁面方法操作，希望能夠給你們帶來一定的幫助，謝謝大家的觀看。
1、當拿到設(shè)計師給的UI設(shè)計圖，前端的首要任務(wù)就是布局和樣式，相信這對于大部分前端工程師來說已經(jīng)不是什么難題了。移動端的布局相對PC較為簡單，關(guān)鍵在于對不同設(shè)備的適配。
2、之前介紹了一篇關(guān)于移動端rem布局方案，這大致是網(wǎng)易H5的適配方案。不過實踐中發(fā)現(xiàn)淘寶開源的可伸縮布局方案效果更好且更容易使用。方案總結(jié)為：根據(jù)屏幕大小 / 750 = 所求字體 / 基準字體大小比值相等，動態(tài)調(diào)節(jié)html的font-size大小。
3、方案總結(jié)為：根據(jù)設(shè)備設(shè)備像素比設(shè)置scale的值，保持視口device-width始終等于設(shè)備物理像素，接著根據(jù)屏幕大小動態(tài)計算根字體大小，具體是將屏幕劃分為10等分，每份為a，1rem就等于10a。
4、通常我們會拿到750寬的設(shè)計稿，這是基于iPhone6的物理分辨率。有的設(shè)計師也許會偷懶，設(shè)計圖上面沒有任何的標注，如果我們邊開發(fā)邊量尺寸，無疑效率是比較低的。要么讓設(shè)計師標注上，要么自食其力。
5、如果設(shè)計師實在沒有時間，推薦使用markman進行標注，免費版去除了一些功能（比如無法保存本地）不過基本滿足了我們的需求了。
6、標注完成后開始寫我們的樣式，使用了淘寶的lib-flexible庫之后，我們的根字體基準值就為750/100*10 = 75px。此時我們從圖中若某個標注為100px，那么css中就應該設(shè)置為100/75 = 1.333333rem。所以為了提高開發(fā)效率，可以使用px轉(zhuǎn)化為rem的插件。如果你使用sublimeText，可以用 rem-unit。
如果大家學習后有任何疑問可以在下面的留言區(qū)討論，感謝大家對腳本之家的支持。
相關(guān)文章
本篇文章主要介紹了Vuejs Prop基本用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本篇文章主要介紹了vue-cli的eslint相關(guān)用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue提示框組件vue-notification使用詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue依賴收集引發(fā)的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了jquery和vue對比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
詳解webpack + vue + node 打造單頁面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁面(入門篇) ，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了Vue+axios封裝請求實現(xiàn)前后端分離，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
如何用vue2+element-ui實現(xiàn)多行行內(nèi)表格編輯
最近開發(fā)項目,關(guān)于表格的數(shù)據(jù)操作比較多,這個地方個人覺得比較難搞,特此記錄一下,這篇文章主要給大家介紹了關(guān)于如何用vue2+element-ui實現(xiàn)多行行內(nèi)表格編輯的相關(guān)資料,需要的朋友可以參考下2024-08-08
下面小編就為大家分享一篇基于vue 動態(tài)加載圖片src的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02