vue寫(xiě)h5頁(yè)面的方法總結(jié)
下面就是小編帶給大家的如何用vue寫(xiě)h5頁(yè)面方法操作，希望能夠給你們帶來(lái)一定的幫助，謝謝大家的觀看。
1、當(dāng)拿到設(shè)計(jì)師給的UI設(shè)計(jì)圖，前端的首要任務(wù)就是布局和樣式，相信這對(duì)于大部分前端工程師來(lái)說(shuō)已經(jīng)不是什么難題了。移動(dòng)端的布局相對(duì)PC較為簡(jiǎn)單，關(guān)鍵在于對(duì)不同設(shè)備的適配。
2、之前介紹了一篇關(guān)于移動(dòng)端rem布局方案，這大致是網(wǎng)易H5的適配方案。不過(guò)實(shí)踐中發(fā)現(xiàn)淘寶開(kāi)源的可伸縮布局方案效果更好且更容易使用。方案總結(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ì)圖上面沒(méi)有任何的標(biāo)注，如果我們邊開(kāi)發(fā)邊量尺寸，無(wú)疑效率是比較低的。要么讓設(shè)計(jì)師標(biāo)注上，要么自食其力。
5、如果設(shè)計(jì)師實(shí)在沒(méi)有時(shí)間，推薦使用markman進(jìn)行標(biāo)注，免費(fèi)版去除了一些功能（比如無(wú)法保存本地）不過(guò)基本滿(mǎn)足了我們的需求了。
6、標(biāo)注完成后開(kāi)始寫(xiě)我們的樣式，使用了淘寶的lib-flexible庫(kù)之后，我們的根字體基準(zhǔn)值就為750/100*10 = 75px。此時(shí)我們從圖中若某個(gè)標(biāo)注為100px，那么css中就應(yīng)該設(shè)置為100/75 = 1.333333rem。所以為了提高開(kāi)發(fā)效率，可以使用px轉(zhuǎn)化為rem的插件。如果你使用sublimeText，可以用 rem-unit。
如果大家學(xué)習(xí)后有任何疑問(wèn)可以在下面的留言區(qū)討論，感謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue中使用scrollTo沒(méi)有效果的完美解決方法
這篇文章主要介紹了在vue中使用scrollTo沒(méi)有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動(dòng)的元素上,不然不生效,scrollTop就會(huì)一直為0,需要的朋友可以參考下2023-10-10
vue實(shí)現(xiàn)多個(gè)tab標(biāo)簽頁(yè)的切換與關(guān)閉詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多個(gè)tab標(biāo)簽頁(yè)的切換與關(guān)閉的相關(guān)資料,使用vue.js實(shí)現(xiàn)tab切換很簡(jiǎn)單,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下2017-07-07
vue監(jiān)聽(tīng)input標(biāo)簽的value值方法
今天小編就為大家分享一篇vue監(jiān)聽(tīng)input標(biāo)簽的value值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解
在Vue2.x中，編寫(xiě)組件的方式是使用Options API，它的特點(diǎn)是在對(duì)應(yīng)的屬性中編寫(xiě)對(duì)應(yīng)的功能模塊，這篇文章主要介紹了Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)詳解,需要的朋友可以參考下2022-10-10
本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue中路由的前進(jìn)和后退問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章通過(guò)代碼示例給大家詳細(xì)分析了Vue組件開(kāi)發(fā)的相關(guān)技巧以及知識(shí)點(diǎn)，對(duì)此有需要的讀者們參考下吧。2018-03-03
在vue項(xiàng)目中添加高德地圖,對(duì)開(kāi)發(fā)地圖的開(kāi)發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用高德地圖的超詳細(xì)步驟,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
解決element?ui?cascader?動(dòng)態(tài)加載回顯問(wèn)題
這篇文章主要介紹了element?ui?cascader?動(dòng)態(tài)加載回顯問(wèn)題解決方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08