開篇語 最近接手了一個移動端的項目。個人感覺是自己做得比較快而且比較健壯的一個。。。移動端最主要就是頁面要適用不同的手機屏幕，ipad等。下麵就分享一些技巧,讓你不依賴任何框架高效地搭建自己的項目。 一、樣式按組件或板塊分文件寫再合成 ①設置各種變數 採用scss或者less來寫css代碼有很多好處 ...
開篇語
最近接手了一個移動端的項目。個人感覺是自己做得比較快而且比較健壯的一個。。。移動端最主要就是頁面要適用不同的手機屏幕，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.
還有一個就是，如果你用谷歌調試的時候，會發現，效果是這樣的：
對，就是會出現一個明顯的滾動條。但是如果你用真機，也就是用移動設備看的時候，你會發現其實滾動條是不會出現的。所以有時候做移動的東西，還是需要真機測試一下比較靠譜啊。
另外要註意一個問題，由於li被display:inline-block.那麼就有了inline的屬性，預設。此元素會被顯示為內聯元素，元素前後沒有換行符。並且，該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。什麼意思呢，簡單來說就是這些li的對齊基線的預設方式是以最後一行的文字對齊的。看圖：
由圖中可以明顯看出，最後一個li由於沒有圖片撐起來，而它們的預設方式又是以最後一行文字為基準的，所以最後一個li就“掉”了下來。這個時候，我們就需要設置一下vertical-align這個屬性的值了。設置為：vertical-align:middle。具體用法，可以看這裡。這樣設置了的話，就沒有問題了哦。效果完成！！！
結語
好像也沒想到還要說什麼呢。先說到這裡吧。。。有看不懂的可以私信給我哦！
最後，祝大家端午節快樂！
