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

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

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

　　擴(kuò)展1：

　　因?yàn)樗脑O(shè)備像素比(dpr=物理像素/CSS像素)是2;dpr是一個(gè)固定的比值;不同的手機(jī)型號(hào)比值不應(yīng)：

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

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

　　dpr固定值如下如：

　　2、app怎么做適配的？

　　· 基于手機(jī)系統(tǒng)開(kāi)發(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完成的頁(yè)面的寬度等于設(shè)備的寬度，頁(yè)面的縮放比例為1.0，不允許最大縮放；

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

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

　　· 使用單位自己?jiǎn)挝恢薪?jīng)常使用的封裝好的flexble.js文件做適配

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

　　3、bfc是什么，清楚浮動(dòng)的原理

　　- BFC含義：

　　- 塊格式化上下文(Block Formatting Context，BFC) 是Web頁(yè)面的可視CSS渲染的一部分，是塊盒子的布局過(guò)程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(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會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

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

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

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

　　- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。

　　- 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

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