移動端開發

移動端開發

1、移動端測試

 

一、瀏覽器測試檢查就能夠測試（模擬各類設備）

Google、Firefox、IE……

A、除了本身自帶的幾個手機尺寸外，還能夠本身編輯自定義尺寸

B、（這裏只能模擬手機的尺寸）

二、真機測試

A、要真機測試就須要一臺模擬服務器

B、xmapp下載 

C、xmapp安裝

D、wampService下載

E、wampService安裝

F、要讓手機和電腦在同一個網絡下，

而後經過手機訪問服務地址，在手機上看手機頁面，用手機看一遍

 

 

 2、移動端視口問題

 

 

4、移動端經常使用設置

 

5、移動端的一些問題

 

 

一、移動端按鈕的圓角問題

 

 

 

 

二、移動端字體問題

移動端每一個手機他都會本身帶有本身特定的字體，你設置了也沒用。

因此只用設置一個下面的字體就能夠了（下面是全部手機都能識別的字體類型）

 

三、文字縮放問題

有些移動端在切換頁面時他會將頁面的文字進行縮放

四、移動端長按會選中文字

 

 五、a標籤和按鈕點擊時的一個高亮顏色設置

通常能夠設置成半透明或者全透明

 

 

 六、fontBoosting

兩段文字設置一樣的字體大小，可是底下那一段文字字體會比上面的文字大不少，那就時出現了fontboosting問題

可是這種問題有時候纔會出現

遇到相似問題的解決方案

七、固定定位的問題，之前兼容性不是很好。如今也是有不少小問題

好比抖動問題

移動端最好不要用固定定位這一個坑

可是淘寶的固定定位上下的並無出現固定定位這種現象

能夠經過CSS模擬固定定位——效果不是很好，而且頁面自己會出現回彈效果

能夠經過事件解決

八、在IOS下面，給body設置overflow依然會有溢出現象

這個時候應該在body下面包一層，在wrap上面設置overflow樣式

body上面的樣式不變

 

6、移動端適配問題

一、百分比適配的話只能解決寬度適配問題

 

二、viewport適配

讓全部的設備的寬度一致

以320px爲準。除以4就是320乘以25%獲得一個具體的數值

 

 

三、rem適配問題

針對於平分時由於有邊框border樣式而致使沒法作到平分

節點尋找

當選取得設計稿是以320px爲準的，

你按照設計稿要求還原設計稿後你的東西也只能說在對應的320px的設備下看上去正常

當超過或者低於這個320px，設計稿就會亂套

rem適配不只能解決寬度屏幕適配問題、像素比例問題，還能夠設置字體大小等凡有大小設置地方的適配問題

rem適配原理（找到一個根節點爲參照目標，全部的涉及大小設置的所有以這個大小爲準來設置，也就是一個基準）

rem適配代碼

rem適配的問題就是計算量太大，計算器都得按爆

解決問題：LESS+Kola——完美計算rem

利用less去計算——less是一種預編譯語言——能夠幫助咱們計算全部的rem值

能夠經過kola幫忙咱們自動編譯出rem的值

css代碼

less代碼

 

 

 less使用

把css文件夾拖到kola裏面

 

 

 

less其餘做用

less代碼：

 

 

 

 

 

 

 

 

 

Bootstrap自定義字體

下載對應文件，找到自定義字體對應的代碼，摘出來在單獨引用

bootstrap官網

 

在bootstrap.css裏面找到相關代碼進行調整

 

找到如下文件而後刪除上面的全部東西

精簡事後的文件就由原來的6000多行變成了600多行

這也就是全部所須要的自定義字體代碼。

7、彈性盒模型

 

只要設置了div樣式爲display:flex，就會有如下概念

 

 

 

 

 

原始代碼：

原始效果圖：

 

flex代碼：

 

flex效果圖：

出現問題：好用的東西都會出現兼容性問題

在移動端有部分機型是不支持FLEX的

 

 

 

 

 

 

 

 

 

 

 

用於元素子集樣式

子集元素大小佔據父級比例大小

子集元素位置排序

 

 

 

 

 

 

 

 

 

 

 

 

 

——————————————爲了解決這個問題，就須要使用老版的彈性盒模型—————————————

 

用於元素子集樣式

8、響應式

響應式的訴求

響應式媒體查詢

 

 

 

只是初步的判斷屏幕垂直與水平，只是判斷寬度和高度大小

 

響應式引用樣式表方式方法一

響應式引用樣式表方式方法二

 

 

9、移動端事件

 

移動端擡起比PC端鼠標擡起要快一點