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