移動端開發的一些技巧總結

標籤：sre   而且   lin   滑動   bar   ipad   float   適配   檔案   

開篇語

最近接手了一個移動端的項目。個人感覺是自己做得比較快而且比較健壯的一個。。。移動端最主要就是頁面要適用不同的手機螢幕，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;  }}

想瞭解更多，可以參考這裡：http://www.cnblogs.com/beidan/p/5275379.html#3382529。

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

①頁面板塊可橫向滑動

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

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

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

具體css代碼如下：

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.

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

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

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

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

移動端開發的一些技巧總結