移動Web初級入門

最好的閱讀是輸出。 –玉伯

初涉移動web，會有一些基本的名稱需要掌握，什麼裝置畫素比呀，移動端web的核心呀，viewport呀，螢幕的的最小物理單位呀。我已經記錄了一些，以後還得繼續補充。

我們來看看移動端最常見的布局：

下面實現上述頁面常見移動web布局三種方法：

對於第一種布局，其實現原理就是header和footer部分都為fixed定位。內容頁面可以使用-webkit-overflow-scrolling:touch來進行滾動，當然，對於不支援的，也可以使用iscroll來相容。

fixed布局網上人說坑太多，滾動的時候bug太多，特別是表單元素時彈出輸入法會有很多問題，所以不建議使用，以下是一些網上參考的資料：

和fixed一樣，只不過將fixed定位設為絕對定位。設定其left,right等值。下面有乙個絕對定位的demo。

flexbox布局我估計是仿照flex*布局方式。由於主流移動端都使用的現代瀏覽器都支援這個css3屬性。flexbox布局俗稱伸縮布局，它可以簡單快速的建立乙個具有彈性功能的布局。由於移動多終端的需求，所以首選是flexbox。

之前提到的常見移動web名詞，裝置畫素比：2的高畫質視網膜技術卻會使變得模糊，這是為什麼呢？

根據計算公式，乙個畫素點會被拆分成4個小點，顯示起來自然模糊了。

解決方案一般有兩個：

1.設定target-densitydpi=device-dpi，採用按照真實比例來展示，然後進行**查詢技術如下面**：

#header

@media screen and (- webkit -device-pixel-ratio:1.5) 
}@media screen and (- webkit -device-pixel-ratio:0.75) 
}

假如需要100×100的，那麼從設計稿(寬為640)上擷取200×200的大小，但設定還是100*100。寬720的設計稿 ，為了滿足顯示畫素為360的螢幕。這樣就可以來只有乙份設計稿只寫乙份**了。

經過@飛天小黑神豬的提示，也可以使用srcset和-webkit-image-set。

另外，多張的顯示可以進行canvas的繪製，進行gpu渲染。。

background-size設定為高度，自適應寬度100%，這也是css3的屬性。

px單位

傳統pc端常用的px來設定大小。因為他比較穩定和精確。

em單位

瀏覽器中放大或縮放瀏覽頁面時會存在乙個問題，因為字型大小是固定了的。要解決這個問題，我們可以使用「em」單位。

em有如下特點：

em的值並不是固定的;

em會繼承父級元素的字型大小。

rem單位

rem是css3的屬性，和em一樣，他的值是不固定的。區別在於他參考的是乙個根元素的確定值。em是相對於其父元素來設定字型大小的，這樣就會存在乙個問題，進行任何元素設定，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根元素html，這樣就意味著，我們只需要在根元素確定乙個參考值。

在了解了px,em,rem的區別後，我們可以進行如下設定：

html

body

p : /*(1.8 x 10=18)*/

在我看來，移動端動畫優先選擇為以下順序：

transition > animation > js

我們可以使用css3動畫庫animate.css玩完成常見的動畫。更多關於css3動畫的可以參考：

移動端原生的最重要的事件touch：

其中，他們之間觸發的先後順序為：

touchstart > touchmove > touchend > click

用這幾個事件可以衍生出很多事件，比如左滑右滑，上下滑屏，放大，縮放等。詳情可以看指尖上的js系列。

現在已經有一些封裝了的框架：

當然還有其他移動端專屬的事件，比如：

我用原生js模仿了神馬搜尋搜出美團後的資訊輪播：

移動端有一些較為成熟框架：

一些公司也有自己的框架

但更多公司選擇使用一些基礎的類庫自己封裝一些常見的互動，畢竟在移動端上流量真的是寸土必爭。比如神馬搜尋用的是zepto.js。通過gzip壓縮後只有幾k，而且風格與jq一模一樣，無學習成本。

當然還有些為工具框架

移動Web利器transformjs入門

在過去的兩年，越來越多的同事 朋友和其他不認識的童鞋進行移動web開發的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高程式設計效率，並享受程式設計樂趣。當然transformjs不僅僅支援移動裝置，支援css3 3d transforms的瀏覽器都能正常使用transf...

web移動端適配入門

乙個表示列印影象或顯示器單位面積上畫素數量的指數。一般用來計量電腦，電視機和手持電子裝置螢幕的精細程度。通常情況下，每英吋畫素值越高，螢幕能顯示的影象也越精細。它的值為 螢幕對角線解析度 螢幕尺寸。計算公式 例如 iphone5 的螢幕解析度為1136 x 640 螢幕大小為 4 英吋。可以由下公式...

移動Web應用開發入門指南 視覺篇

智慧型移動裝置由於發展歷史短，但更新速度快，從而導致移動裝置的物理屬性差異巨大，其中一部分物理屬性影響視覺，另一部分影響到互動 相容或效能。對人類來說，至少有80 以上的外界資訊通過視覺獲得，視覺是人和動物最重要的感覺，所以，咱們從視覺開始說起。看乙個案例 訪問m.3600.com首頁，首頁焦點圖，...