適配移動端技能

1：為了確保適當的繪製和觸屏縮放，需要在之中新增 viewport 元資料標籤。

name="viewport"
content="initial-scale=1.0,user-scalable=no,maxinum-scale=1,width=device-width">
//忽略將頁面中的數字識別為**號碼
content="telephone=no"
name="format-detection">
//content="mobile">
content="yes">
將**新增到主螢幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式
content="black">
name="format-detection"
content="telephone=no,email=no">
一、天貓
天貓觸屏版title>
三、京東
京東 - 手機版 title>
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
name="format-detection"
content="telephone=no">
name="keywords"
content="手機購物,wap**,日用百貨,3c家電,汽車用品">
name="description"
content="京東手機版提供了包括數碼、家電、手機、電腦配件、網路產品、
日用百貨等數萬種商品，手機快捷購物，就上京東手機版。">

1.2: 在移動裝置瀏覽器上，通過為視口（viewport）設定 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓你的**看上去更像原生應用的感覺。注意，這種方式我們並不推薦所有**使用，還是要看你自己的情況而定！

name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2 : 由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。使用百分比進行布局，其中還可能使用到

min-width: ;
max-width: ;

3：相對大小的字型，不要使用px 單位可以選擇使用，rem re。網頁預設字型大小為16px；

4：css的@media規則

/* 超小螢幕（手機，小於 768px） */ /* 沒有任何**查詢相關的**，因為這在 bootstrap 中是預設的（還記得 bootstrap 是移動裝置優先的嗎？） */ /* 小螢幕（平板，大於等於 768px） */ @media (min-width: @screen-sm-min) /* 中等螢幕（桌面顯示器，大於等於 992px） */ @media (min-width: @screen-md-min) /* 大螢幕（大桌面顯示器，大於等於 1200px） */

@media (min-width: @screen-lg-min)

我們偶爾也會在**查詢**中包含 max-width 從而將 css 的影響限制在更小範圍的螢幕大小之內。

@media (max-width: @screen-xs-max) 
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) 
@media (min-width: @screen-lg-min)

5：的自適應

img

img, object

老版本的ie不支援max-width，所以只好寫成：

img

適配移動端技能

移動端適配

移動端適配

移動端適配

適配移動端技能

移動端適配

移動端適配

移動端適配

相關推薦