欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Web移動(dòng)端布局那些事

  發(fā)布時(shí)間：2016-07-20 09:49:14   作者：佚名   我要評(píng)論
針對(duì)Web移動(dòng)端布局的那些事，為大家進(jìn)行詳細(xì)介紹，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近做了一個(gè)針對(duì)微信移動(dòng)端的項(xiàng)目，在開發(fā)中遇到了不少的坑，學(xué)到了也不少，發(fā)現(xiàn)有許多地方值得寫一下，以供做web移動(dòng)端同學(xué)參考參考。

一、單位

說到移動(dòng)端，不得不提適配問題，大大小小的移動(dòng)設(shè)備不但讓做android和ios的難過，因?yàn)樵O(shè)備大小和瀏覽器的差異，現(xiàn)在也讓前端開始頭疼了，不過，方法總是比問題多，我們是革命的隊(duì)伍，遇到問題就要上！

因?yàn)楝F(xiàn)如今市面上移動(dòng)設(shè)備的分辨率大小不同，顯然咱們常用的px單位在這個(gè)時(shí)候就有些不太靈光了，為此，css3出了一個(gè)新單位——rem，rem是移動(dòng)端神器，它完美解決了分辨率的適配問題。

rem就是相對(duì)于根元素<html>的font-size來做計(jì)算,舉個(gè)栗子：


如圖這樣，一個(gè)寬高各100px的box就出現(xiàn)了，很簡(jiǎn)單吧，發(fā)現(xiàn)沒，有些像我們以前常用的em，不過rem是相對(duì)于根元素(<html>)的字體大小，em相對(duì) 于父元素的字體大小。

雖然很簡(jiǎn)單，但是移動(dòng)設(shè)備那么多，我們又怎么根據(jù)手機(jī)屏幕的分辨率不同，去設(shè)置<html>的字體大小呢？

我知道的方法有2個(gè)：

1）通過css媒體查詢


如圖所示，通過媒體查詢的方式，只需要把常用的屏幕寬度考慮進(jìn)去即可，能夠滿足大部分應(yīng)用場(chǎng)景，不過這一做法不夠嚴(yán)謹(jǐn)，處女座的你，怎么能滿足呢？那就用js去設(shè)置fontSize吧！

2）通過js計(jì)算


通過js設(shè)備的屏幕分辨率，可以計(jì)算出相應(yīng)的字體的大小，這個(gè)方法可以適配所有屏幕的大小，這下就完美許多了。

不過有些時(shí)候會(huì)很麻煩，因?yàn)閞em會(huì)涉及到換算的問題，比如70px的寬，根目錄字體是12px,那換算公式為：70/12 = 5.83333333~，每次寫一個(gè)單位都要用計(jì)算器去算，想想就淚崩了，不過作為程序猿，怎么能讓人去做這種事，這工作可以讓Less或者Sass等預(yù)處理器去完成。

二、使用<meta>標(biāo)簽中的viewport布局

有了rem單位還不夠，得再加上viewport，有了這個(gè)東西，麻麻再也不用擔(dān)心我的移動(dòng)端適配問題了，話不多說，直接上圖

紅圈圈的必須要，有了這個(gè)<meta>標(biāo)簽，頁面就有那么點(diǎn)意思了。

三、彈性布局盒子布局

以前PC端布局方式通常會(huì)使用float、margin、padding等方式布局，這些方法不僅有繁瑣的計(jì)算，而且在移動(dòng)端還容易出錯(cuò)?，F(xiàn)在移動(dòng)端，有更好的選擇，使用flexbox布局方式。舉個(gè)栗子：用flex做tab

html代碼：css代碼：

做均分的tab，應(yīng)該是flexbox最常見的一個(gè)功能了，實(shí)現(xiàn)原理很簡(jiǎn)單，如圖，只需要給“父元素”，“子元素”分別賦予“display：flex”,”flex：1″即可。子元素的寬度不會(huì)根據(jù)內(nèi)容的長(zhǎng)短而發(fā)生改變。前端同學(xué)增加或刪減tab數(shù)量，只需要增減DOM結(jié)構(gòu)即可，無需樣式的修改。一直以來這種布局方式都有兼容性問題，讓前端同學(xué)想用，又不敢用，究其原因也就是即分不清它各個(gè)版本的編寫規(guī)范和兼容性。值得驚喜的是，目前除了Opera mobile12，移動(dòng)端的各大瀏覽器都是支持flexbox的舊版語法的，但不包含flex的wrap屬性。所以可以大膽用，不用太擔(dān)心。

四、坑

布局問題算是解決了，雖然現(xiàn)在看似很完美了，不過，還是有很多坑在等著我們呢！

1、使用rem兼容性沒問題，但是還是有許多問題需要注意

a) 做出來的效果與效果圖有些許偏差

為什么會(huì)出現(xiàn)這個(gè)原因呢？后來發(fā)現(xiàn)，這是因?yàn)闉g覽器對(duì)小數(shù)數(shù)值的處理各不相同導(dǎo)致。不同瀏覽器計(jì)算rem轉(zhuǎn)換為px數(shù)值時(shí)，對(duì)于小數(shù)點(diǎn)后的數(shù)值的處理是有所偏差，rem計(jì)算偏差的根源是瀏覽器內(nèi)核數(shù)字類型的區(qū)別，如果瀏覽器的內(nèi)核數(shù)字類型是float類型，能夠較好地支持有小數(shù)點(diǎn)的數(shù)值。當(dāng)瀏覽器內(nèi)核數(shù)字類型是int類型，不支持小數(shù)點(diǎn)，會(huì)對(duì)數(shù)字進(jìn)行四舍五入，這樣就會(huì)有偏差。如果元素越大偏差得就越明顯！這個(gè)坑幾乎無法避免，只能讓他更好的適應(yīng)最多的瀏覽器。比如chroem內(nèi)核。

b) 雪碧圖定位問題

由上面我們可以得知，rem的換算成px的尺寸非嚴(yán)格精確，如果雪碧圖圖標(biāo)之間的距離過小，就可能導(dǎo)致圖標(biāo)過界，因此圖與圖之間的間隙需要留相應(yīng)大一點(diǎn)。

c) rem單位最好不用在PC端

直接舉個(gè)栗子：

代碼：


看了代碼，大家應(yīng)該猜到，這應(yīng)該是兩個(gè)完全相同的盒子才對(duì)，不過，效果卻是這樣的

PC效果:


iPhone6效果：

從效果得知，PC端瀏覽器對(duì)rem單位支持并不友好，終其原因，我也不得而知，望有知道的同學(xué)，多多分享，所以，前端同學(xué)盡量別把這個(gè)單位放到pc端上使用，以免和設(shè)計(jì)圖有所出入。

1、使用彈性盒子模型需要注意的問題。

a) 雖然移動(dòng)端的各大瀏覽器都是支持flexbox的舊版語法的，但是還是得有兼容性寫法;

b) 在開發(fā)的時(shí)候，我發(fā)現(xiàn)在使用彈性盒子模型時(shí)，如果涉及到文字的時(shí)候需要注意，在li里寫上“我們”和“我們的”，分別是兩個(gè)字和三個(gè)字。會(huì)有不同的寬度而導(dǎo)致不均分，解決辦法，如上面css所示，我設(shè)置了子元素width為5%（只有設(shè)置了li是統(tǒng)一的width就行，不一定需要是5%）就可以解決這個(gè)問題。

總結(jié)：

說到這兒，web移動(dòng)端布局問題基本上算是完了，不過，學(xué)這些還不夠，想做好web移動(dòng)端開發(fā)，還是需要學(xué)習(xí)很多很多東西（比如性能問題）才能做出用戶體驗(yàn)超好的web頁面，革命尚未成功，同志還需努力啊。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

原文鏈接：http://blog.csdn.net/jsonchen007/article/details/51942449

相關(guān)文章

最新評(píng)論