移動端web頁面知識小結之頁面部分
原文網址：
http://www.imooc.com/article/9153
http://www.imooc.com/article/9153
一、設計
H5的設計圖一般是720P或者1080P的.算法就是/2或者/3得到的數值,就是H5頁面的數值.
一般情況下,我們以安卓標準360*640爲準則.iphone的不同分辨率,我們使用自適應樣式去控制即可.
二、切圖————Retina顯示屏帶來的問題
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變爲多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計爲傳統PC的2倍。
前端的應對方案是： 設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2
//例如圖片寬高爲：200px*200px，那麼寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px
.css{font-size:20px}三、單位
在PC端製作網頁的時候,我們都習慣了的單位是px,
在移動端可以但最好不要使用px.因爲你不知道將來會發生什麼.推薦採用的單位是rem!!!
rem是root-em的縮寫,也就是說,是根相對單位,其相對的是html的font-size的單位.
html的font-size默認是16px.
在PC端chrome瀏覽器中,默認最小文字是 12px 當你設置爲這樣之後利用開發者工具進行調試的時候,會發現有一些詭異的地方.因此,需要將瀏覽器的最小文字設置爲10或者6,一般都設置到6,這樣可以解決在PC端調試的問題.在移動端是沒有這個限制的(有,但默認關閉)
在移動端的推薦寫法：
html {font-size: 62.5%;} // 16px / 10px x 100% = 62.5%這個百分比來源於瀏覽器自己設置的默認字體大小.一般默認情況下,瀏覽器默認大小是16px,也可以不是.這樣做的根本目的,是將網頁的解釋權交給各個瀏覽器自己去處理.無論是設置爲10px還是100px,或者62.5%在默認狀態下,都是沒有問題的.但是,如果瀏覽器的設置不是默認,那麼,62.5%的優勢就出來.
注：在PC端也能這樣設定HTML font-size百分比
但是,不能設置爲62.5% 因爲谷歌瀏覽器默認最小字體是12px.也就是說,你設置爲62.5%的話,會自動轉換爲12px.
解決方法是,設置爲625%,然後用到的地方全部除以100。
4、不可破壞盒子模型
強烈不推薦寫下面的代碼，這會破壞盒子模型
* {box-sizing:border-box;}因爲：box-sizing:border-box;可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中
5、儘量不要設定寬度
在做移動端頁面的時候,儘量不要設定寬度,讓它自然的佔據一行,這時候我們可以根據需要設定外填充和內填充.
如果需要寫一個盒子,默認是百分百寬的,我們怎麼做呢? 答案是,什麼都不做,那麼它就是百分百了
遇到多列布局的時候，就不要給rem這樣的單位的寬度,而是要給50%或者33.3%的寬度.
在設定了這樣的寬度之後,不要給這個元素設定內填充和外填充.如果有需要的話,在這個元素裏面再寫一個元素,給這個元素加你所需要的填充.
另外,在佈局上,要儘量少用浮動佈局,適當在細節部分使用定位佈局,並做好隱藏溢出等處理.以防止浮動佈局可能出現的問題.
6、邊框
在PC端的網頁製作中,我們一般就使用邊框屬性
border: 1px solid #ddd;但是在移動端,就需要特別注意了,因爲邊框的寬度是計算在盒子模型當中的,所以,如果你使用不慎,可能造成你佈局的困境.
因此,一般矩形的元素,我們可以使用
outline: 1px solid #ddd;來製作邊框,這個屬性是不會計算在盒子模型當中的.
但當你嘗試做一個兩列布局的列表的時候,使用這個參數,你會發現兩個元素之間的邊框好像是兩個像素.對的,你沒有看錯,確實是兩個像素. 怎麼解決這個問題呢?一般情況下,你只需要給元素加上背景就可以解決這個問題.後面的元素的背景會遮住前面元素的outline發出來的邊框.
如果元素不是矩形的怎麼辦呢? 其實很好解決.因爲,在CSS中,不僅僅是outline可以來模擬邊框,還有一個屬性,也是可以模擬邊框的,那就是CSS3的box-shadow外發光屬性.
要給元素加上一個1px的實線邊框,可以這樣寫：
box-shadow:0 0 0 1px #ddd;還是有辦法的,可以藉助僞元素來實現模擬,:before和:after;
7、儘量不要設計邊框線條
網上有不少0.5px邊框的實現教程,這樣做的好處是,可以做出比較細的線條,讓我們的H5看上去更像原生的APP.我個人的建議是,不要嘗試這樣做,因爲很麻煩,而且兼容性都有問題,得不償失.那麼正確的做法是什麼呢?很簡單——跟你的設計師說,儘量不要設計線條
8、使用jquery還是zepot
使用zepot的原因只有一個,它小.還有其他的好處嗎?沒發現.
我個人的建議是使用jquery2.x的版本,好處有如下
擁有大量的插件可以使用
功能比zepot強大太多
效能比zepot強大
習慣了jquery
9、樣式按組件或板塊分文件寫再合成
採用scss來寫css代碼
9.1、設置各種變量
拿到設計圖的第一步，就是要分析各個頁面之間有哪些模塊、哪些樣式、哪些顏色是一樣的。一般情況下，爲了各個頁面的風格統一，各個頁面上的主顏色應該都是一致的，而且好些頁面都會用到一些相同的組件，例如slider。所以，我們首先可以定義一個常量文件，裏面就專門存放顏色、高度、寬度等變量。定義一個公共樣式文件，例如寫一些各個頁面都有可能用到的清楚浮動等樣式。
用scss定義的話，其中有一個方法是%定義法，就是定義了並不會被編譯，而是實際上用到的時候纔會被編譯。
9.2、按模塊細分
按模塊等細分之後，代碼的可讀性能夠明顯地提高，方便維護，而且引入頁面的文件個數也減少了，還可以提高性能呢。不過，這裏要注意，子模塊的文件名要以“_”開始哦，這樣就不會被編譯，而是需要引用的時候再編譯哦。
10、列表
百分比的優勢在於，同一個百分比的真實尺寸會跟隨屏幕大小變化
假設現在的要求是一行4個板塊，適應任何屏幕。那麼，用ul,li寫html，然後佈局的話，如果寫定ul的寬度是100%，然後li的寬度是25%，再設置box-sizing:border-box的話。各種屏幕下，這四塊都是平分並且不會出現橫向滾動條的。不過要注意，這個時候的間距就不要用margin-left和margin-right來撐開，而是用padding來撐開。就是像這樣比例明顯，板塊區分度高的情況適合用百分比來佈局。
代碼如下：
<style type="text/css">
ul{ width:100%; margin-bottom:10px;}
ul li{ width:25%; box-sizing:border-box;}
</style>11、常見效果
11.1、頁面板塊可橫向滑動
不要以爲這種效果會涉及到什麼touch事件，要寫多複雜的js。其實只用css就可以很簡單地實現了。原理就是利用overflow屬性。設置其水平方向滾動，垂直方向hidden即可。 當然，還要配合一些其他的代碼。 具體css代碼如下：
<style>
ul.pinxiang-list{ padding:10px; padding-top:0; padding-bottom:20px; width:100%; box-sizing:border-box; overflow-x:scroll; overflow-y:hidden; white-space: nowrap; float:left;}
ul.pinxiang-list li{ position:relative; display:inline-block; margin-right:5px; ｝
/*這裏最主要的就是要設置ul的寬度是100%，並且向左浮動。li要設置爲display:inline-block.*/
</style>如果你用谷歌調試的時候，會出現一個明顯的滾動條。但是如果你用真機，也就是用移動設備看的時候，你會發現其實滾動條是不會出現的。所以有時候做移動的東西，還是需要真機測試一下比較靠譜啊。
要注意一個問題，由於li被display:inline-block.那麼就有了inline的屬性，默認。此元素會被顯示爲內聯元素，元素前後沒有換行符。並且，該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。什麼意思呢，簡單來說就是這些li的對齊基線的默認方式是以最後一行的文字對齊的。
這個時候，我們就需要設置一下vertical-align這個屬性的值了。設置爲：
vertical-align:middle
