應該說，移動端的開發是伴隨著html5的興起而出現的，2023年第一款iphone誕生，2023年html5這個名詞第一次登上「舞台」。當時的移動網際網路開始逐漸興起，發展到今，移動網際網路已經和人們的日常生活密切相關。作為開發者，對於乙個嶄新的事物，一直在嘗試的「路上」，到底最好的開發方式是什麼？本文介紹了從移動端誕生到現在，自己探索到的開發方法，並配以相應知識點，歡迎跟大家溝通、分享。
於是，移動端的開發方向逐漸向移動端網頁傾斜。對於pc端，我們一直使用的是px（畫素）進行**的書寫，但是到了移動端，需要面臨不同的解析度。在2023年的時候，自己和團隊成員在寫移動端的時候，由於是初次接觸，還是在使用px（畫素）作為單位。因為在2023年的時候，絕大多數的手機的螢幕大小都是320*480解析度，所以，即便是使用畫素作為單位進行移動端網頁開發也是完全可以的。
隨著移動端的繼續發展，在2023年9月，iphone5上市，開始引領「特殊解析度」的發展，於是，320*480解析度的手機螢幕在整個手機市場當中占有的份額越來越少，各種各樣的解析度如雨後春筍般冒了出來。
此時我們再進行固定畫素進行開發明顯是不明智的。於是，我們開始採用百分比（相對度量單位）進行盒模型橫向屬性（width、左右內邊距、左右外邊距）的製作，使用em（相對度量單位）實現文字的處理。但盒模型縱向上還是使用固定畫素作為單位。
但是，這種操作導致了乙個問題——主要表現在img標籤的處理上。對於來說，只需要設定橫向百分比，縱向會自動等比例縮放。在列表頁以及內容頁還好，畢竟內容是自動撐開父級高度的；但是在首頁或者二級頁，但凡涉及到父級元素高度固定的盒模型，裡面的img就會出現變形（壓縮或者拉伸）的問題。
這個問題也是困擾了自己許久，但是一直沒有找到乙個非常好的解決辦法。
當自己還在糾結img的處理時，2023年，在北京流行起了一種新的技術——響應式布局。通過**查詢，針對不同大小解析度的裝置，設定不同的樣式。應該說，對移動端頁面的開發幫助不大，原因在於，響應式的出現主要是因為我們希望一段**能夠同時適配pc端、平板電腦以及手機。由於三種平台的樣式以及使用者體驗應該是迥然不同的，那麼此時，我們就需要有「斷點」，在不同位置，有不同的樣式，而在兩個「斷點」之間的樣式，則使用相對單位做「漸變性的過渡」。
應該說，響應式布局解決了典型的螢幕畫素不同樣式的問題，但是卻依舊搞定不了之前的那個問題。
在橫向百分比，縱向畫素值的方法無效時，自己能夠想到的就是縱向也設定為百分比了，但是卻發現，盒模型屬性在縱向上的一些設定上是存在問題的，如padding-top/bottom、margin-top/bottom等。而文字屬性中line-height在設定百分比時也並不是按照當前元素高度計算的。
於是，橫縱向均設定為百分比的方法就破滅了~
隨著html5的發展，除了原來的em單位，又新增了rem單位。這兩個單位都是相對單位。1em表示的是當前元素乙個字型大小的尺寸；而1rem，也表示的是乙個字型大小的尺寸，但是是針對html標籤進行計算的。相比之下，rem的計算起來要簡單很多。於是，自己嘗試用rem解決橫向以及縱向的設定，捨棄掉了百分比，發現還是挺不錯的，算是相容了絕大多數機型和瀏覽器。之後，在使用一款華為手機進行測試的時候，發現並不支援橫向的rem。於是，又需要想辦法啦~~~
針對華為手機，我嘗試了橫向百分比，發現還是能夠支援的，於是就折中了一下，橫向使用百分比進行控制，縱向使用rem作為單位。此時能夠實現所有瀏覽器的相容。
在橫向使用百分比，縱向使用rem時，會由於計算產生一定的誤差，於是，運用學習過的一些html5技術，進行移動端頁面的優化，例如，使用css3的盒陰影替換掉邊框。而對於rem，在計算中通常是存在一定的字型誤差的（會計算出小數點），此時正好接觸了一下**的移動端頁面，看到了乙個不錯的js框架——flexible.js，通過這個框架對頁面進行處理，能夠防止小數點的出現。
上個月月初，發現網易移動端的製作方法有些特殊，檢視**時發現，網易採用了固定畫素進行書寫，而通過metahandler.js進行了頁面的控制。最近嘗試了一下，感覺還是挺不錯的，相容也是比較好的，不失為一種好方法。
移動端如何進行rem的適配
網上很多都說會pc網頁開發，也就會了mobile網頁開發。那麼實際呢也是如此，但是對於新手來說卻摸不著頭腦無從下手，一直糾結於適配的問題，那麼這裡就來展示下rem適配。展示rem適配 rem適配 function 如果設計師給的圖是750px 那麼1rem就是750 16 46.875px 也就是1...
釘釘如何進行PC端開發
前段時間，用釘釘進行了伺服器端的開發，對照著官方文件，感覺還是比較順利的。後續想有時間研究一下pc端客戶端的開發，看著官方文件，說的確實是比較簡練，但也確實沒看太明白，廢了半天勁也沒成功。後來經過無數次嘗試，發現期待的彈窗竟然出現了，為了讓其他人少走彎路，下面將自己的心得記錄如下 釘釘pc客戶端開發...
移動端頁面開發流程
移動布局 1，移動裝置 手機和ipad 安卓系統ios系統 安卓系統 內建瀏覽器是谷歌，ios內建safari瀏覽器，他們的核心都是webkit，不考慮相容性，需要考慮的是安卓和ios的區別 2，布局 裝置寬度 裝置的實際大小，裝置的解析度 廠家給的 頁面的大小 設計稿上的大小 瀏覽器的視口 瀏覽器...