1.750的設計圖,20px為多少rem?
首先設計圖是UI設計提供給前端開發(fā)工程師的設計稿,750的設計圖出自于手機屏幕為375px*667px的iphone678手機屏幕的設計稿,這里也可以稱之為2倍圖。20px的字體大小涉及到了單位的轉換,頁面中默認的字體大小為16px,那么此時的1rem = 16px;
那么20px通過計算得出公式 1rem = 16px; ?rem = 20px; 得出結果為:1.25rem
擴展1:
因為他的設備像素比(dpr=物理像素/CSS像素)是2;dpr是一個固定的比值;不同的手機型號比值不應:
物理像素:可以理解成你ps里面測量的距離的大小
CSS像素:你編寫開發(fā)代碼的時候CSS里面給定的像素值;
dpr固定值如下如:
2、app怎么做適配的?
· 基于手機系統(tǒng)開發(fā)的app(原生Android/IOS)
· 另外一種是webapp
· 設置以下標簽:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
具體的含義為:app完成的頁面的寬度等于設備的寬度,頁面的縮放比例為1.0,不允許最大縮放;
· 使用媒體查詢和響應式做適配
· 使用媒體查詢檢測設備屏幕的大小改變布局樣式,但是成本耗費比較大,不易操作
· 使用單位自己單位中經常使用的封裝好的flexble.js文件做適配
· 封裝好的flexble.js文件文件可以做到適配,并且原理是已經封裝好的視口和設備像素比基于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ī)則:
- 內部的Box會在垂直方向,一個接一個地放置。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊(按照最大margin值設置)
- 每個元素的margin box的左邊, 與包含塊border box的左邊相接觸
- BFC的區(qū)域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。
- 計算BFC的高度時,浮動元素也參與計算
更多關于前端培訓的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。