Mobile頁面項目總結

項目過去個把月了，一直沒有寫些東西總結下，此次藉着年後的空隙，將當時記錄下來的幾個點回顧一下。

今明的佈局：position技巧

每當看到相似橫向並排佈局的時候，老是想起定寬浮動，和下面講到的列表並排不一樣，這裏是指定輸出的數據。而且你能夠看到，在浮動的元素中，有一個元素與其餘不一樣，咱們將其餘相一樣式的元素稱爲時段導航，不一樣的單獨稱爲日期導航。最初的認知告訴我要用ul標籤，內嵌li標籤來解決這個佈局，但是在我嘗試屢次以後，並無達到理想效果，日期導航和時段導航的留空和高度始終不和諧。以後，我分析瞭如下，之因此不適合徹底用ul li 浮動來排版，是由於日期導航的樣式實在是太區別於時段導航，讓咱們能夠將它單獨拎出來做爲一個獨立樣式來實現。

個人方案是：時段導航仍用合適的ul li 來實現，而日期導航採用div標籤訂位{position:absolute; top:0; right:0;}來實現。這樣，日期導航始終出如今目標區域的最右邊，我只要關注時段導航的留白和高度，就能徹底掌控日期導航的留白和高度，實現理想展現效果。

del引起的下劃線：*{}去除，del{}特殊line-though

del標籤在某些安卓系統的瀏覽器下會展現多餘的底部下劃線，即目標樣式同時擁有刪除線和下劃線，看起來很不舒服。我採用的解決方案是用*去除全部下劃線，而後指定目標樣式爲{  text-decoration:line-through;} 這樣del在瀏覽器中的展現就統一了。

列表佈局：width: Npx; 配合 overflow:hidden技巧

這個是小技巧，相信你們都知道。

我這裏寫出個人想法，個人認知告訴我像下面這種並列的大都是用定寬，加上浮動方案解決。這樣浮動沒有問題，問題就在於在控制中間留白的時候，個人思惟限制於寬度中，就決定給奇偶項不一樣的margin值，奇數項是：margin-right;偶數項是margin-left;

這樣有個弊端：必需要求後端給的數據是成雙成對的，好比：6*6*4，若是其中參雜奇數：5*6*3，那麼所展現的佈局就會錯亂。在這個項目中，這是徹底不可控的，意味着隨時有奇數對兒的數據出現，所以，這種奇偶對待的方案被徹底否認。

 

個人一行兩列方案：

 

個人留空方案：

 

列表導航隨滾動條滾動，樣式處理技巧

導航隨高度智能漂浮是常見的UI展示方式，不過在實現的時候我踩了個大坑。實現思路很明確：當目標容器的top值小於滾動的高度時，目標容器的樣式設置爲{position:fixed;top:0;}

而後再賦予懸浮的樣式，就能達到以下效果。

其中的坑在哪呢？簡單的這麼實現，你會發現，在PC瀏覽器上， 你拖動滾動條的時候目標容器會在臨界值的邊緣抖動，這很讓人不爽。問題在哪裏？沒錯，就是由於你野蠻的將目標直接從它的原始位置上拽了下來，致使整個web頁面的佈局發生變化，目標容器如下的元素都會自動上調位置，這就形成了難看的抖動畫面。

個人解決方案是：將要轉換樣式的時候，保留目標容器的位置，即設置合適的寬和高。

 

總結

     

以上幾點是我印象比較深入的，雖然技術含量不高哦，但我想表達的是前端是個Magic，有不少方案能夠實現設計師的效果，但要想用最溫馨，最平滑的方案去實現，咱們仍是得花心思的，野蠻的實現可能只會帶去不和諧的用戶體驗。

最後仍是但願帶給你們分享的快樂。算是起步吧。