1.750的設(shè)計圖，20px為多少rem？

　　首先設(shè)計圖是UI設(shè)計提供給前端開發(fā)工程師的設(shè)計稿，750的設(shè)計圖出自于手機屏幕為375px*667px的iphone678手機屏幕的設(shè)計稿，這里也可以稱之為2倍圖。20px的字體大小涉及到了單位的轉(zhuǎn)換，頁面中默認(rèn)的字體大小為16px，那么此時的1rem = 16px；

　　那么20px通過計算得出公式 1rem = 16px; ?rem = 20px; 得出結(jié)果為:1.25rem

　　擴(kuò)展1：

　　因為他的設(shè)備像素比(dpr=物理像素/CSS像素)是2;dpr是一個固定的比值;不同的手機型號比值不應(yīng)：

　　物理像素：可以理解成你ps里面測量的距離的大小

　　CSS像素：你編寫開發(fā)代碼的時候CSS里面給定的像素值；

　　dpr固定值如下如：

　　2、app怎么做適配的？

　　· 基于手機系統(tǒng)開發(fā)的app(原生Android/IOS)

　　· 另外一種是webapp

　　· 設(shè)置以下標(biāo)簽：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

　　具體的含義為：app完成的頁面的寬度等于設(shè)備的寬度，頁面的縮放比例為1.0，不允許最大縮放；

　　· 使用媒體查詢和響應(yīng)式做適配

　　· 使用媒體查詢檢測設(shè)備屏幕的大小改變布局樣式，但是成本耗費比較大，不易操作

　　· 使用單位自己單位中經(jīng)常使用的封裝好的flexble.js文件做適配

　　· 封裝好的flexble.js文件文件可以做到適配，并且原理是已經(jīng)封裝好的視口和設(shè)備像素比基于webapp開發(fā)

　　3、bfc是什么，清楚浮動的原理

　　- BFC含義：

　　- 塊格式化上下文(Block Formatting Context，BFC) 是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域

　　- BFC觸發(fā)條件：

　　- 根元素

　　- float屬性不為none(脫離文檔流)

　　- position為absolute或fixed

　　- display為inline-block,table-cell,table-caption,flex,inine-flex

　　- overflow不為visible

　　- BFC布局規(guī)則：

　　- 內(nèi)部的Box會在垂直方向，一個接一個地放置。

　　- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊(按照最大margin值設(shè)置)

　　- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸

　　- BFC的區(qū)域不會與float box重疊。

　　- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。

　　- 計算BFC的高度時，浮動元素也參與計算

　　更多關(guān)于前端培訓(xùn)的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。