移動開發的一些技巧

開篇語

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

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

①設置各類變量

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

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

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

②按模塊細分

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

2、頁面適應性佈局

我的認爲，適配移動端比較好的佈局方式是百分比+rem佈局。

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

 

紅色框那裏，假設如今的要求是一行4個板塊，適應任何屏幕。那麼，用ul,li寫html，而後佈局的話，若是寫定ul的寬度是100%，而後li的寬度是25%，再設置box-sizing:border-box的話。各類屏幕下，這四塊都是平分而且不會出現橫向滾動條的。就是像這樣比例明顯，板塊區分度高的狀況適合用百分比來佈局。

代碼以下：

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。

3、常見的一些效果的作法

①頁面板塊可橫向滑動

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

不要覺得這種效果會涉及到什麼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。具體用法，能夠看這裏。這樣設置了的話，就沒有問題了哦。效果完成！！！

 

結語

好像也沒想到還要說什麼呢。先說到這裏吧。。。有看不懂的能夠私信給我哦！

最後，祝你們端午節快樂！