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

stackfing 發布于2019-08-29 11:02 / 3123人閱讀

摘要：正文概念本次要談的移動不是，只是很普通的移動端的界面。默認行為作為之前開發端的人員，第一反應就是如何把那么大的界面內容展現到手機小小的屏幕上。就是在顯示多行文字的時候，可能需要在自己期望顯示多少行之后，省略后面的文字，然后以。。。

前言

開發生涯總是豐富多采，工作多年，不同領域還是逃不過雨露均沾，之前開發過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

以上設置是
［布局的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！?

云服務器 GPU云服務器移動web開發 web移動端開發 web前端開發需要會什么 web后端開發需要學習什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111382.html

3月份前端資源分享

摘要：面試如何防騙一份優秀的前端開發工程師簡歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...

nanchen2251 2019-08-21 15:21 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

stormgens 2019-08-22 15:34 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 評論0 收藏0
7月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 評論0 收藏0