1.750的設(shè)計(jì)圖，20px為多少rem？
首先設(shè)計(jì)圖是UI設(shè)計(jì)提供給前端開發(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通過計(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像素：你編寫開發(fā)代碼的時(shí)候CSS里面給定的像素值；
dpr固定值如下如：
2、app怎么做適配的？
· 基于手機(jī)系統(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完成的頁(yè)面的寬度等于設(shè)備的寬度，頁(yè)面的縮放比例為1.0，不允許最大縮放；
· 使用媒體查詢和響應(yīng)式做適配
· 使用媒體查詢檢測(cè)設(shè)備屏幕的大小改變布局樣式，但是成本耗費(fèi)比較大，不易操作
· 使用單位自己?jiǎn)挝恢薪?jīng)常使用的封裝好的flexble.js文件做適配
· 封裝好的flexble.js文件文件可以做到適配，并且原理是已經(jīng)封裝好的視口和設(shè)備像素比基于webapp開發(fā)
3、bfc是什么，清楚浮動(dòng)的原理
- BFC含義：
- 塊格式化上下文(Block Formatting Context，BFC) 是Web頁(yè)面的可視CSS渲染的一部分，是塊盒子的布局過程發(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)的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。
京公網(wǎng)安備 11010802030320號(hào)