前端小知識

1.前端開發工程師，不關心手機分辨率，咱們只關心手機視口

2.手機瀏覽器內核：微軟的Trident   火狐的Gecko   開源的內核Webkit  Opera的Presto

目前微軟的Trident在移動終端上主要爲WP七、8系統內置瀏覽器。Opera的Presto內核主要爲 Opera Mobile、OperaMini、歐朋瀏覽器以及歐朋HD Beta版。Webkit內核的適用範圍則較爲普遍，Android原生瀏覽器、蘋果的Safari、谷歌Chrome(Android4.0使用)都是基於Webkit開源內核開發的。

兼容的前綴：
 -ms-
 -moz-
 -o-
 -webkit-

3.流式佈局

百分比佈局也叫做流式佈局、彈性盒佈局。

百分比可以設置的屬性是width、height、padding、margin。其餘屬性好比border、font-size不能用百分比設置的。

移動端和PC端公用一套代碼，建議使用流式佈局。

4.媒體查詢

IE六、七、8不支持媒體查詢，也爲了防止手機端的某些瀏覽器不支持媒體查詢，因此不要把全部的選擇器都放在媒體查詢裏面。

5.rem響應式佈局

1. 通常不要給元素設置具體的寬度,可是對於一些小圖標能夠設定具體寬度值

2. 高度值能夠設置固定值,設計稿有多大,咱們就嚴格寫多大

3. 全部設置的固定值都用REM作單位(首先在HTML中設置一個基準值：PX和REM的對應比例,而後在效果圖上獲取PX值,佈局的時候轉化爲REM值)

4. JS獲取真實屏幕的寬度,讓其除以設計稿的寬度,算出比例,把以前的基準值按照比例進行從新的設定,這樣項目就能夠在移動端自適應了

5. rem:當前頁面中元素的REM單位的樣式值都是針對於HTML元素的font-size的值進行動態計算的
   em:表示父元素的字號的倍數。(特例：在text-indent屬性中，表示文字寬度)

 

 

------------------------------------------------------------------------------------------------------------------------

 

 

如何作個REM響應式佈局

一、從UI設計師拿到PSD設計稿,而後在樣式中給HTML設定一個font-size的值，咱們通常都設置一個方便後面計算的值，例如：100px

html{
font-size:100px；//1rem=100px
}

二、寫頁面，寫樣式
首先按照設計稿的尺寸來寫樣式，而後在寫樣式值的時候，須要把獲得的像素值除以100計算出對應的REM的值。
值得注意的是：真實項目中外層盒子的寬度咱們通常仍是不寫固定值，沿用流式佈局法的思想，咱們用百分比的方式佈局

margin:0 0.2rem
height:3rem;

三、根據當前屏幕的寬度和設計稿的寬度來計算咱們HTML的font-size的值
例如：設計稿寬度爲640px,其中有一個部分是輪播圖，它的尺寸是600*300，在樣式中給HTML設定一個font-size的值爲100px,則輪播圖大小應該爲 6rem×3rem，那若是手機屏幕寬度爲375px,其font-size應該設置爲多少。

375/640*100->fontsize=58.59375//此時輪播圖能自適應手機屏幕大小

根據當前屏幕寬度和設計稿寬度的比例，動態計算一下當前寬度下的fontsize值應該是多少，若是fontsize的值改變了，以前設定的全部REM單位的值自動會跟着放大或者縮小。能夠經過如下這段代碼實現：

但若是當前屏幕寬度大於設計稿寬度，圖片會被拉長而失真，因此以上代碼須要稍微作些修改：