必會的行動端Html5的基礎知識點

來到這家公司之後,和以前的工作發生了很大的轉變.以前我一直是做PC端頁面的.來到現在這家公司之後,主要是做手機移動端的頁面.

移動端的頁面在我這個做習慣了PC端頁面的人看來,應該是很簡單的一些事情.但是在上手的過程當中,還是發現,原來移動端雖然DOM結構要簡單得多,但是需要注意的細節,還是非常多的.原因非常簡單,那就是,你必須考慮所有的手機上不同解析度的展示效果.

行動端的解析度有哪些呢?

以iphone為例,有以下解析度

iphone4 640*960
iphone5 640*1136
iphone6 750*1334
iphone6plus 1242*2208

安卓陣營的分辨率以前各式各樣,現在基本分為三個

720P 720*1280
1080P 1080*1920
2K 1440*2560

這是一個幻覺,其實,在做手機H5的時候,分辨率根本不時這個樣子的….愁死人了,他們在瀏覽器中的真實分辨率是

以iphone為例,有以下解析度

iphone4 320*480
iphone5 320*568
iphone6 375*667
iphone6plus 414*736

安卓陣營的分辨率以前各式各樣,現在基本分為三個

720P 360*640
1080P 360*640
2K 360*640

看到這個你是不是暈了…原來,安卓比蘋果強多了…呵呵,還真是這個樣子

其實,我們要做的是一個自適應的網頁,並且,這個自適應範圍的最低寬度為320px,也就是說,你的程式碼必須保證在寬度320的時候是能夠瀏覽的,不能擠壓變形

移動端使用什麼單位?

在PC端製作網頁的時候,我們都習慣了的單位是px,那麼是不是在移動端我們也用這個單位呢?我只能說,你可以這樣做.但是,最好不要.因為你不知道將來會發生什麼.

我們經過一些探討,和參考目前國際上通行的方案,採用的單位是rem

那麼,什麼是rem?我們都知道em是相對父級的尺寸單位.那麼rem是root -em的縮寫,也就是說,是根相對單位,其相對的是html的font-size的單位.

#好了,那麼html的font-size預設是多大呢?是16px.也就是說,你的所有的尺寸依靠,都是依據16px 的相對運算的結果.

知道了這個之後,我們就開始了複雜的計算,比如,我要設定一個12px 的文字,需要用什麼百分比.會發現,這個計算真心是坑爹啊,我在一個專案的一期就是這樣做的.但是這個計算真心累.

於是,我們採用了變通的方法,我們給html修改預設的font-size.於是,我們是這樣寫的.

html {font-size: 10px;}

登入後複製

整個世界都安靜了,按照這個方法計算,真的特別方便,比如,我需要12px我就寫1.2rem就可以了.

但是,我迅速思考了一下這個問題,感覺我們在脫褲子放屁.

讓我們回到起點,我們為什麼要用rem而不用px呢?原因很簡單,我們是為了讓頁面不會因為一些設備的特殊性而限定為px,是為了去適應各種設備.

而我們給html加上了px為單位的,不是又返回原樣了嗎?那到不如直接去使用px,我們還少寫兩個字符呢.

那麼,問題沒有解決的方法了嗎?還是繼續回到那反人類的計算當中去??

#我迅速轉換了一下思維,把這段程式碼改成了

html {font-size: 62.5%;}

登入後複製

改成了百分比之後,這個問題迅速得到了解決.那樣,瀏覽器在設定不同的預設文字大小的時候,我們的頁面都可以跟隨改變,而不在限定死了.

在PC端chrome瀏覽器中,預設最小文字是12px 當你設定為這樣之後利用開發者工具進行調試的時候,會發現有一些詭異的地方.因此,需要將瀏覽器的最小文字設為10或6,一般都設定到6,這樣可以解決在PC端調試的問題.在行動端是沒有這個限制的(有,但預設關閉)

手機html5頁面Meta設定

這個有專門的文章,可以百度一下,在這裡我強調一點,需要加上下面的程式碼.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

登入後複製

盒子寬度

有一些人,包括某些知名的前端框架,會給css中加上這樣一段代碼:

* {box-sizing:border-box;}

登入後複製

我個人強烈不推薦這樣做.因為這破壞了盒子模型,雖然加上了這個之後,你寫代碼是方便了,但是當你引入某些外置資源的時候,你會發現變形到你根本調不回來的節奏.原因很簡單,這一句代碼,會改變頁面所有的元素的盒子模型.

曾经因为这一句代码,让我们前端的人排查一个问题排查了两天,始终无法解决.当我接手了项目之后,这个问题交给我,我一开始也莫名其妙.但是后来仔细检查,才发现是这一句代码惹的祸.

如果我们需要写一个盒子,默认是百分百宽的,我们怎么做呢?

答案是,我们什么都不做,那么它就是百分百了.

在做移动端页面的时候,尽量不要设定宽度,让它自然的占据一行,这时候我们可以根据需要设定外填充和内填充.

当然,并非所有的东西都可以这样来做,总会遇到多列布局的时候

这就需要注意了,不要给rem这样的单位的宽度,而是要给50%或者33.3%的宽度.

在设定了这样的宽度之后,不要给这个元素设定内填充和外填充.如果有需要的话,在这个元素里面再写一个元素,给这个元素加你所需要的填充.

另外,在布局上,要尽量少用浮动布局,适当在细节部分使用定位布局,并做好隐藏溢出等处理.以防止浮动布局可能出现的问题.关于定位问题,可以参考我的另外一篇博文 Css 详细解读定位属性 position 以及参数;

边框的处理

在PC端的网页制作中,我们一般就使用边框属性border: 1px solid #ddd;但是在移动端,就需要特别注意了,因为边框的宽度是计算在盒子模型当中的,所以,如果你使用不慎,可能造成你布局的困境.

因此,我们需要一些其他的参数来设定边框,一般矩形的元素,我们可以使用outline: 1px solid #ddd;来制作边框,这个属性是不会计算在盒子模型当中的.

另外,当你尝试做一个两列布局的列表的时候,使用这个参数,你会发现两个元素之间的边框好像是两个像素.对的,你没有看错,确实是两个像素.

怎么解决这个问题呢?一般情况下,你只需要给元素加上背景就可以解决这个问题.后面的元素的背景会遮住前面元素的outline发出来的边框.

这是一个非常实用的技巧.

但是,如果元素不是矩形的怎么办呢?

其实很好解决.因为,在CSS中,不仅仅是outline可以来模拟边框,还有一个属性,也是可以模拟边框的,那就是CSS3的box-shadow外发光属性.

例如,我要给元素加上一个1px的实线边框,你这样写,是不行的

box-shadow:0 0 1px #ddd;

登入後複製

你会发现,你模拟出来的边框会有点发虚.

正确的写法是

box-shadow:0 0 0 1px #ddd

登入後複製

;看到这样写很奇怪?去w3school看下就明白了.

当然,这两种做法都是有弊端的,比如我就想设置一条左边框的线条,而不时整个的都有边框怎么办?

还是有办法的,我们可以借助伪元素来实现模拟,:before和:after;具体怎么实现,这里不做演示了.

这里需要说明一下,网上有不少0.5px边框的实现教程,这样做的好处是,可以做出比较细的线条,让我们的H5看上去更像原生的APP.我个人的建议是,不要尝试这样做,因为很麻烦,而且兼容性都有问题,得不偿失.那么正确的做法是什么呢?很简单——跟你的设计师说,尽量不要设计线条-_-|||反正我就是这样跟我们团队的设计说的.