移動端開發的一些技巧

開篇語

最近接手了一個移動端的項目。個人感覺是自己做得比較快而且比較健壯的一個。。。移動端最主要就是頁面要適用不同的手機屏幕，ipad等。下面就分享一些技巧,讓你不依賴任何框架高效地搭建自己的項目。

一、樣式按組件或板塊分文件寫再合成

設置各種變數

採用scss或者less來寫css代碼有很多好處。這裡就不詳細說。

我們拿到設計圖的第一步，就是要分析各個頁面之間有哪些模塊、哪些樣式、哪些顏色是一樣的。一般情況下，為了各個頁面的風格統一，各個頁面上的主顏色應該都是一致的，而且好些頁面都會用到一些相同的組件，例如slider。所以，我們首先可以定義一個常量文件，裡面就專門存放顏色、高度、寬度等變數。定義一個公共樣式文件，例如寫一些各個頁面都有可能用到的清楚浮動等樣式。

個人感覺scss比less更好用一點，用scss定義的話，其中有一個方法是%定義法，就是定義了並不會被編譯，而是實際上用到的時候才會被編譯。例子圖：

按模塊細分

個人感覺，按模塊等細分之後，代碼的可讀性能夠明顯地提高，方便維護，而且引入頁面的文件個數也減少了，還可以提高性能呢。不過，這裡要注意，子模塊的文件名要以「_」開始哦，這樣就不會被編譯，而是需要引用的時候再編譯哦。例子如圖：

二、頁面適應性布局

個人認為，適配移動端比較好的布局方式是百分比+rem布局。

百分比的優勢在於，同一個百分比的真實尺寸會跟隨屏幕大小變化。舉個例子，像這種：

紅色框那裡，假設現在的要求是一行4個板塊，適應任何屏幕。那麼，用ul,li寫html，然後布局的話，如果寫定ul的寬度是100%，然後li的寬度是25%，再設置box-sizing:border-box的話。各種屏幕下，這四塊都是平分並且不會出現橫向滾動條的。不過要注意，這個時候的間距就不要用margin-left和margin-right來撐開，而是用padding來撐開。就是像這樣比例明顯，板塊區分度高的情況適合用百分比來布局。

代碼如下：

ul{

width:100%;

margin-bottom:10px;

｝

ul li{

width:25%;

box-sizing:border-box;

｝

為什麼要設置box-sizing:border-box;呢？不明白的話，可以看這裡：http://www.w3school.com.cn/cssref/pr_box-sizing.asp。

rem的話，rem的取值是只。相對於根元素htm的font-size，即只需要設置根元素的font-size，其它元素使用rem單位設置成相應的百分比即可。你再用@media寫一下不同尺寸下跟元素html的font-size的值即可。然後神奇的事情就發生了。當你改變尺寸時，字體。圖片等，就會自動跟著適應了。用起來真的很爽！

一些常用的適應尺寸如下:

@charset "utf-8";

@media only screen and (max-width: 315px){

html {

font-size: 50% !important;

}

}

@media only screen and (min-width: 316px){

html {

font-size: 62.5% !important;

}

}

@media only screen and (min-width: 640px){

html {

font-size: 125% !important;

}

}

@media only screen and (min-width: 750px){

html {

font-size: 150% !important;

}

}

@media only screen and (min-width: 1242px){

html {

font-size: 187.5% !important;

}

}

三、常見的一些效果的做法

頁面板塊可橫向滑動

一種就是我們經常見的，一些特賣活動、搶購活動的時候，需要出現橫向滾動情況。效果圖：

不要以為這種效果會涉及到什麼touch事件，要寫多複雜的js。其實只用css就可以很簡單地實現了。原理就是利用overflow屬性。設置其水平方向滾動，垂直方向hidden即可。

當然，還要配合一些其他的代碼。

具體css代碼如下：

ul.pinxiang-list{

padding:10px;

padding-top:;

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.

還有一個就是，如果你用谷歌調試的時候，會發現，效果是這樣的：

對，就是會出現一個明顯的滾動條。但是如果你用真機，也就是用移動設備看的時候，你會發現其實滾動條是不會出現的。所以有時候做移動的東西，還是需要真機測試一下比較靠譜啊。

另外要注意一個問題，由於li被display:inline-block.那麼就有了inline的屬性，默認。此元素會被顯示為內聯元素，元素前後沒有換行符。並且，該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。什麼意思呢，簡單來說就是這些li的對齊基線的默認方式是以最後一行的文字對齊的。看圖：

由圖中可以明顯看出，最後一個li由於沒有圖片撐起來，而它們的默認方式又是以最後一行文字為基準的，所以最後一個li就「掉」了下來。這個時候，我們就需要設置一下vertical-align這個屬性的值了。設置為：vertical-align:middle。具體用法，可以看這裡。這樣設置了的話，就沒有問題了哦。效果完成！！！

班班學院學習改變命運

GIF/1928K

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！