移動端開發學習

移動端基礎概念

▪ 做移動端（wap）和做pc端區別：

1、系統      pc：windows/mac區別不大 ；  移動端：ios/android/windows有區別

2、瀏覽器   pc：區別很大   ； 移動端：區別不大

3、解析度（尺寸）    pc：有區別      ； 移動端：區別很大

▪ 裝置獨立畫素：螢幕的大小、螢幕的尺寸（別名叫做點points，是個單位），獲取window.screen.width/window.screen.height

注意：1、橫豎屏切換時，真機裡的這個值不會改變，但在模擬器裡會切換

2、在乙個點裡，可以放下多個畫素

3、這個值可以通過縮放改變

▪ 裝置畫素（物理畫素）：螢幕的解析度（實際放的畫素值），買手機時廠家告訴你的解析度，這個值是虛擬的，無法獲取

▪ 畫素比（dpr，這個值無法改變），縮放的比例=裝置畫素/裝置獨立畫素，獲取window.devicepixelratio

▪ viewport 視口（可視區視窗），通過meta標籤設定

未設定時

1、螢幕的高度一般為980，但是不同型號裝置相應不同

2、真機與模擬器的值也會不同

3、用window.innerwidth/window.innerheight方法獲取

設定後content:視口的相關設定

width：螢幕的寬度，一般不設定成確定數值，安卓裝置有些不支援   device-width:裝置的實際寬度  height同理

user-scalable:能否縮放   yes-允許縮放  no-不允許縮放

initial-scale:初始比例（要與最小比例保持一致） maximum-scale:最大能夠縮放的比例  minium-scale:最小能夠縮放的比例

1、若設定縮放的話，就把width與user-scalable去掉

2、用了縮放後，並不是真正地縮放了，而是改變了裝置的獨立畫素（螢幕的尺寸）

移動端適配方案

▪ 適配：在不同尺寸的手機裝置上，頁面相對性的達到合理的展示（自適應）或者保持一定效果的等比縮放（看起來差不多）

適配的方法：1、百分比適配   2、比例縮放適配   3、viewport適配    4、rem適配  5、彈性布局適配

▪ 百分比布局問題（一般情況下，百分比布局配合其他適配方式使用）：

1、百分比的值不好計算

2、需要確定父級元素的大小，因為要根據父級元素的大小進行計算

3、寬度可以設定，但是高度不好設定

▪ 比例縮放適配：把所有機型的裝置設定成一致的

2、通過設定比例（初始比例和縮放比例的），把寬度縮放成

一致的注意：viewport裡給了縮放以後的值後，最終的頁面的寬度是拿來的值除以縮放比例

缺點：所有的手機將會看上去是同樣大小，沒有分別，使用者體驗非常不好；有時會算出小數，導致有一些誤差（無關緊要）

▪  viewport適配跟比例縮放適配相似，看下面的**

html  2em=20px

通過它可以做到只修改根元素的大小，能成比例地調整所有字型大小，只依賴html字型的大小，在移動端開發裡常用。

靜態設定rem:

12

34

1、

12

//結尾有冒號

@rem:25rem;
body
div:nth-child(1)
//寫好以後右鍵，選擇編譯，就會編譯出乙個同名的css檔案，沒修改一些就要編譯一次，css檔案裡會出現算好的rem值

div:nth-child(1)

點選工具，再選擇選項，單擊左側的hbuilder，就會彈出下面的視窗，開啟px轉rem功能，設定相關引數，就可以直接在css裡設定了，此時輸入px值會自動換成rem值

1、必須動態地區設定html的大小，才能適配

2、根據頁面（注意：是psd圖，也就是真實大小）的寬度除以乙個係數，把算出類的這個值賦值給html的font-size屬性

特點：1、所有有單位的屬性會根據螢幕的尺寸自動加算

2、同樣的乙個元素，在不同裝置下的大小是不一樣的，在尺寸小的裝置下顯示的小，反之，大

3、一般以iphone6為基準，以它的寬度750除上乙個係數，再去計算rem

為什麼要除以乙個數字呢？給你一大屏思考！

1、乙個頁面裡，不可能全部都是整屏的元素，肯定有一行放多個的元素，所以就把一行等分成n份

2、不除以乙個數字的話，那1個rem就是一整個螢幕的寬度了，這個值太大，如果元素的寬度比它小的話，不容易計算

3、這個係數可以自己定，建議給乙個能整除的值

▪ vw：相對於視口的寬度，視口被均分為100單位的vw

h1 如果視口的寬度是200mm，那麼上述**中h1元素的字型大小將為16mm，即(8x200)/100

▪ px：絕對單位，給多少是多少，不會變，做不到適配，在移動端開發裡很少用

▪ em：相對單位，相對於自身字型大小的值

font-size:12px;   1em=12px

問題：1、chrom下有最小字型限制，必須為12px，所以這個值不能小於12

2、如果有兩個一樣的元素，但是裡面的字型不一樣，那就不能統一設定了，或者元素字型變化了，就又要統一設定一遍

▪ 移動端一些問題

1、固定定位問題

固定定位在移動端的相容性不是很好，以前老版本的某些安卓手機不支援，ios4以前的版本也不支援

qq瀏覽器下有時候網上滑動的話，就會隱藏掉header

當開啟鍵盤時，固定定位會失效

2、body下的overflow問題

body加了overflow:hidden後，橫向沒效果（ios），安卓下沒問題

▪ 移動端的樣式重置

1、連線點選時候，預設有乙個背景

-webkit-tap-highlight-color:rgba(0,0,0,0);

2、按鈕在ios下都是圓角

border-radius:0;

3、每台裝置裡的預設字型是不一樣的（移動端裝置裡大部分沒有宋體和微軟雅黑）

font-family:helvetica;

4、橫豎屏切換或使用者自己通過瀏覽器設定的話，可以改變字型的大小（需要給body下的所有元素）

-webkit-text-size-adjust:100%;

5、長按文字ios下會選中文字，安卓下無效

-webkit-user-select:none;

6、固定定位在一些ios低版本下不相容，以及一些國產手機裡也不相容

移動端開發

一。響應式設計好處 1.一套專案 2.一套開發環境 3.乙個url 4.內容所見即所得 5.不會因為終端公升級而導致不可用 做法 布局百分比寬度 容器浮動 二。viewport引數的最佳組合 三。mediaquery書寫思路 先寫高解析度樣式。理由 1.設計師設計原型往往首先基於寬屏，甚至不會給出適...

移動端開發

移動前端開發正逐漸步入前端技術的主流，事實上跟在一般的pc上，並不需要你掌握額外的技術，然而你在pc web上那一套在多數情況下並不適用於手機web，你必須知道這其中的注意點。but，移動端布局最爽的就是再也不用考慮各種對ie的相容了 一 首先來說一下移動端和pc端頁面布局的不同點 二 做移動端頁面...

移動端開發

移動裝置忽略ios將頁面中的數字識別為 號碼的方法 在中加入 移動端手勢事件 touchstart當手指觸控螢幕時觸發 touchmove當手指在螢幕滑動時不斷的觸發 touchend當手指從螢幕上移開時觸發 touchcancel當系統停止跟蹤觸控時觸發 pwa pwa的優勢 能夠在各種網路環境下...