2022年html5常见面试题目合集（一）

　　1.750的设计图，20px为多少rem？

　　首先设计图是UI设计提供给前端开发工程师的设计稿，750的设计图出自于手机屏幕为375px*667px的iphone678手机屏幕的设计稿，这里也可以称之为2倍图。20px的字体大小涉及到了单位的转换，页面中默认的字体大小为16px，那么此时的1rem = 16px；

　　那么20px通过计算得出公式 1rem = 16px; ?rem = 20px; 得出结果为:1.25rem

　　扩展1：

　　因为他的设备像素比(dpr=物理像素/CSS像素)是2;dpr是一个固定的比值;不同的手机型号比值不应：

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

　　CSS像素：你编写开发代码的时候CSS里面给定的像素值；

　　dpr固定值如下如：

　　2、app怎么做适配的？

　　· 基于手机系统开发的app(原生Android/IOS)

　　· 另外一种是webapp

　　· 设置以下标签：

　　具体的含义为：app完成的页面的宽度等于设备的宽度，页面的缩放比例为1.0，不允许最大缩放；

　　· 使用媒体查询和响应式做适配

　　· 使用媒体查询检测设备屏幕的大小改变布局样式，但是成本耗费比较大，不易操作

　　· 使用单位自己单位中经常使用的封装好的flexble.js文件做适配

　　· 封装好的flexble.js文件文件可以做到适配，并且原理是已经封装好的视口和设备像素比基于webapp开发

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

　　- BFC含义：

　　- 块格式化上下文(Block Formatting Context，BFC) 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

　　- BFC触发条件：

　　- 根元素

　　- float属性不为none(脱离文档流)

　　- position为absolute或fixed

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

　　- overflow不为visible

　　- BFC布局规则：

　　- 内部的Box会在垂直方向，一个接一个地放置。

　　- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)

　　- 每个元素的margin box的左边，与包含块border box的左边相接触

　　- BFC的区域不会与float box重叠。

　　- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

　　- 计算BFC的高度时，浮动元素也参与计算

　　更多关于前端培训的问题，欢迎咨询千锋教育在线名师，如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问，获取试听资格来试听我们的课程，在线零距离接触千锋教育大咖名师，让你轻松从入门到精通。