移動web開發淺談之那些咱們須要知道的基礎

前言

開發生涯老是豐富多采，工做多年，不一樣領域仍是逃不過雨露均沾，以前開發過android，微信，ios，web網站也玩過。可是對於移動web這一塊，確實沒有專門很深刻的學習，如今須要作了，也將本身的學習過程記錄下來，供你們互相學習，說的不對，能夠報警。

正文

概念

本次要談的移動web不是web app，只是很普通的移動端的web界面。
移動web能夠這麼理解：就是把之前在pc上的界面搬到移動端（爲了說明方便，我下面統稱之爲手機）來操做，展現，這樣解釋沒毛病。

默認行爲

做爲以前開發pc端的人員，第一反應就是如何把那麼大的pc界面內容展示到手機小小的屏幕上。其實咱們能夠先作一個實驗，用手機訪問一個pc的界面，咱們會發現手機的將整個界面的縮小到整個手機界面，須要放大才能看清全部的內容。
這裏面有個viewport的概念，其實手機瀏覽器幫咱們作了一個事情，他會提供一個viewport,以ios 8爲例，它提供了一個960px寬的viewport來放置咱們的pc界面，這樣的目的是爲了保持pc的界面的不錯亂，而後將這viewport（佈局viewport）總體縮放到手機屏幕（設備寬度）的大小（度量的viewport）可視範圍。

viewport設置

因此這樣的方式是不合適咱們開發的，因此咱們須要設置一下meta

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=no">

以上設置是
［佈局的viewport］＝［設備寬度］＝［度量的viewport］
這樣咱們設計出來的界面纔會比較直觀的顯示在手機上，而不須要考慮縮放問題

高效移動web佈局

我只是簡單的介紹兩種佈局的大概，以及優缺點，具體的還須要各位百度瞭解詳情了，畢竟一兩句話說不清楚

一：Flexbox彈性盒子佈局

這個佈局方式就是顧名思義，是對一個盒子的彈性設置，你能夠在裏面設置內容的佔用空間狀況比例設置，排放位置等等。
優勢：比較的方便，排列出你想要的適配效果。
缺點：存在兼容性問題，特別是android4.4如下只兼容老版本的Flexbox.(老版本叫Flexbox，新版本就叫Flex)，因此仍是推薦使用老版本的Flexbox。

二：響應式設計

響應式佈局是靠（媒體查詢）來實現的，所謂媒體查詢就是樣式判斷當前的運行環境（屏幕寬高，設備寬高，橫屏豎屏）來配置不一樣的樣式來顯示。
它有三個設計點
1.百分比佈局
什麼意思呢，就是不一樣的屏幕，寬度不可控，因此在佈局的時候儘可能採用百分比的方式放置元素來兼容不一樣的屏幕
2.彈性圖片
這個解釋就是當屏幕大於必定的寬度的時候，你能夠展現一個固定大小的圖片，當你檢測出屏幕很小的時候，就要讓這個圖片適當的按百分比縮放，纔有更好的體驗佈局效果，跟第一種百分比佈局不太同樣，細細體會
3.從新佈局，顯示與隱藏
這個就是大招了，就是檢測不同的界面寬高參數，直接大動做調整不一樣的排版結構，和一些小屏幕上面不過重要模塊的隱藏操做。
這三個設計點事響應式佈局很是經常使用的方式，讓咱們瞭解一下他的利弊吧
優勢：能夠說是一本萬利，一個界面適應了全部的設備，減小了重複開發。
缺點：由於他加載了全部設備端的樣式，管你用不用，畢竟當你在手機端條件比較差的時候，加載多餘的樣式，流量，性能等方面不是最優的。

特別樣式處理

我這裏簡單的說明一些狀況，你們能夠有個印象便可，解決方式不少

高清圖片

爲了不圖片產生模糊，圖片的寬高應該用物理像素渲染，便是100＊100的圖片應該使用100dp*100dp。
width:(w_value/dpr)px;
height:(h_value/dpr)px;
(緣由理解px和dp在手機上面的顯示關係)

一像素邊框

一像素的邊框顯示模糊，不精緻的問題，網上有衆多解決方式，能夠百度一下便可

相對單位 rem

em:是根據父節點的font-size爲相對單位
rem：是根據html的font-size爲相對單位
em在多層嵌套下，變得很是難以控制
rem更加能做爲全局統一設置的度量

rem的基值設置多少比較好？
爲了適應大手機屏幕 推薦：rem = screen.width/20 (手動計算設置)
還有一點須要注意的是字體font-size不推薦使用rem單位，由於字體的閱讀舒服感大小就是那麼大，不須要根據屏幕的大小而變化。

多行文本益處。。。

就是在顯示多行文字的時候，可能須要在本身指望顯示多少行以後，省略後面的文字，而後以。。。的方式顯示，具體操做方法網上都有

總結

這是我本身的學習過程，但願你們一塊兒成爲一個優秀的工程師，bye！?