移動端開發規範以及基礎總結（速記）

移動裝置的基礎知識:

1 ios裝置：

pt：邏輯，連線物理和軟體的中介。pt,point

ppi：每英吋px的數量 ，視網膜屏是ppi超過300的螢幕，iphone4開始

1.1 蘋果裝置以及解析度裝置

螢幕尺寸

解析度(pt)

reader

解析度(px)

渲染後ppi

iphone 3gs

3.5吋

320x480

@1x

320x480

163

iphone 4/4s

3.5吋

320x480

@2x

640x960

330

iphone 5/5s/5c

4.0吋

320x568

@2x

640x1136

326

iphone 6

4.7吋

375x667

@2x

750x134

326

iphone6 plus

5.5吋

414x736

@3x

1242x2208

1080x1920

401

2 android裝置：

px：同上

dp：同上pt

sp:測量空間點密度的單位，單位英吋上點的個數

dpi：同上ppi

2.1  安卓螢幕尺寸關係:

1 1dp=1px mdpi(常見解析度: 320*480)

1.5 1dp=1.5px hpi(常見解析度:480*800)

2 1dp=2px xhdpi(常見解析度：720*1280)

3 1dp=3px xxhdpi(常見解析度:1080*1920)

4 1dp=4px ***dpi(常見解析度:2560*1440)

3 pt和px的對應關係以及常見裝置：

1倍：1pt=1dp=1px（mdpi、iphone 3gs）

1.5倍：1pt=1dp=1.5px（hdpi）

2倍：1pt=1dp=2px（xhdpi、iphone 4s/5/6）

3倍：1pt=1dp=3px（xxhdpi、iphone 6）

4倍：1pt=1dp=4px（***hdpi）

4  dpr與解析度的關係：

css中的px等同於pt，是虛擬的點，邏輯單位。不同的縮放比，pt(css畫素)佔的實際畫素不一樣。

css中畫素px / 縮放比=實際的畫素px

舉例：（設定相同的px樣式，在不同的裝置上相識效果）

上圖很明顯的說明，設定相同px在不同裝置上的顯示效果。

有兩點需要分清：

1  我們所說的顯示效果實際上物理世界的顯示效果，也就是說換算成尺寸，最直觀的效果。

2  這種顯示的差異，實際上是不同裝置對css px的理解不同造成的。也就是說在不同的裝置上此css px不同於彼css px

怎麼解決這種差異？

1 統一css px裝置之間的px的解釋，css中1px對應實際裝置的1px。

2 在1的基礎上，構建邏輯尺寸。bing go......,解決問題:)。兩個問題都統一了之後，就很容易解決這個問題了。仔細想想，我們所謂看到的

顯示效果一致，是不是就是寬度高度的比例一致，也就是物理尺寸中的寬度和高度等比。

解決方式rem

這種解決方式，也就是說在dpi和ppi之間構建乙個統一的邏輯單位。

背景知識：

1 rem（相對於根元素的尺寸）。

2 viewport 

width：控制 viewport 的大小，可以指定的乙個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 css 的畫素）。

height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許使用者縮放到的最大比例。
minimum-scale：允許使用者縮放到的最小比例。
user-scalable：使用者是否可以手動縮放

布局視口：document.document.clientwidth

視覺視口：window.innerwidth

獲取根元素的寬度：window.document.documentelement.getboundingclienrect().width;

獲取物理尺寸和理想視口的比例：window.devicepixelratio

（screen.width有嚴重的相容性問題，獲取有可能是裝置的寬度，也可能是理想視口的尺寸）

4 viewport的設定和rem的基準值設定。

;(function(win, lib) );

if (metael) 
} else if (flexibleel) 
if (maximumdpr) }}
//不設定屬性的時候
if (!
dpr 
&& !
scale)  else if (devicepixelratio 
>= 
2 && (!
dpr 
|| dpr 
>= 
2)) else 
} else 
scale 
= 1 
/ dpr;
}docel.setattribute('data-dpr', dpr);
//未設定meta屬性的時候
if (!
metael)  else 
}//初始化rem
function 
refreshrem()
var 
rem 
= width 
/ 10;//寬度10等分
docel.style.fontsize = 
rem 
+ 'px';
flexible.rem = 
win.rem = 
rem;
}//重置的時候重新整理
//var resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize';
win.addeventlistener("resize", function() , false);
win.addeventlistener('pageshow', function(e) 
}, false);
// body上設定12 * dpr的font-size值，為了重置頁面中的字型預設值，不然沒有設定font-size的元素會繼承html上的font-size，變得很大
if (doc.readystate === 
'complete')  else , false);
}refreshrem();
flexible.dpr = 
win.dpr = 
dpr;
flexible.refreshrem = 
refreshrem;
flexible.rem2px 
= function(d) 
return 
val;
}flexible.px2rem 
= function(d) 
return 
val;
}})(window, window['lib'] || (window['lib'] = {}));

750px寬度的設計圖，基礎單位 a = 750/10; 把a看成1rem,30*40px=30/75 * 40/75 = 0.4*0.53rem

5 字型的特別說明：

較寬的裝置當然希望顯示字數更多，用rem不好，可以根據縮放比，設定字型的大小。

標準(中等螢幕@2):30px----->3倍縮放比 ,30px/2*3=45px---->1倍的縮放比，30px/2=15px;

5 手動轉換計算還是自動計算

可以用less混合，當然只是相對簡單了。sass應該會更好。

@p2r:720

/10;//設計圖設定
.px4dpr(@pro,@val):@val/
2;  }
[data-dpr
="2"] &:@val;
}  [data-dpr
="3"] &:@val/2*
3;  }
}.px2rem(@pro,@val):@val/@p2r;
}

移動端專案開發總結

對於這次移動端頁面開發,新接觸到的東西不少,首要的乙個就是響應式布局,在移動頁面開發中,需要考慮到移動端各種不同的螢幕大小而使用不同的布局來呈現出想要的效果.在小螢幕的移動裝置中.可能需要減少頁面中的資訊量,並且改變原有的布局方案,採用適用於移動端的布局方案.而在中等螢幕大小的移動裝置中,如平板,則...

基礎回顧（六） 移動端開發基礎

瀏覽器現狀 手機螢幕現狀瀏覽器顯示頁面內容的螢幕區域 布局視口 layout viewport 將pc端尺寸的頁面通過壓縮顯示在移動端視窗 視覺視口 visual viewport 使用者正在看到的 的區域，通過縮放去操作視覺視口，但不會影響布局視口，仍保持原來的寬度 理想視口 ideal view...

移動端適配基礎總結

說到移動端適配，首先我們需要先搞清楚一些基礎知識，所以本文路線是先了解畫素，dpr，視口等基礎知識，然後再整理出移動端適配方案。畫素其實分為兩種，分別是物理畫素和css畫素 物理畫素 裝置畫素 物理畫素，顧名思義，顯示屏是由乙個個物理畫素點組成的，通過控制每個畫素點的顏色，使螢幕顯示出不同的影象，螢...