以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以点赞关注。
移动布局方案
https://juejin.im/post/599970f4518825243a78b9d5#heading-22
image.png
Rem, Em
https://blog.csdn.net/romantic_love/article/details/80875462
一、rem单位如何转换为像素值
1.当使用rem单位的时候，页面转换为像素大小取决于叶根元素的字体大小，即HTML元素的字体大小。根元素字体大小乘rem的值。例如，根元素的字体大小为16px，那么10rem就等同于10*16=160px。
二、em是如何转换成px的
当使用em单位的时候，像素值是将em值乘以使用em单位的元素的字体大小。例如一个div的字体为18px，设置它的宽高为10em，那么此时宽高就是18px*10em=180px。
.test{
width: 10em;
height: 10em;
background-color: #ff7d42;
font-size: 18px;
}
一定要记住的是，em是根据使用它的元素的font-size的大小来变化的，而不是根据父元素字体大小。有些元素大小是父元素的多少倍那是因为继承了父元素中font-size的设定，所以才起到的作用。
2.em单位的继承效果。
使用em单位存在继承的时候，每个元素将自动继承其父元素的字体大小，继承的效果只能被明确的字体单位覆盖，比如px和vw。只要父级元素上面一直有fontsize为em单位，则会一直继承，但假如自己设置了font-size的单位为px的时候，则会直接使用自己的px单位的值。
三、根html的元素将会继承浏览器中设置的字体大小，除非显式的设置固定值去覆盖。所以html元素的字体大小虽然是直接确定rem的值，但这个字体大小首先是来源于浏览器的设置。（所以一定要设置html的值的大小，因为有可能用户的浏览器字体大小是不一致的。）
四、当em单位设置在html元素上时，它将转换为em值乘以浏览器字体大小的设置，
例如，
html{
font-size: 1.5em;
}
可以看到，因为浏览器默认字体大小为16px，所以当设置HTML的fontsize的值为1.5em的售后，其对应的px的值为16*1.5=24px
所以此时，再设置其他元素的rem的值的时候，其对应的像素值为n*24px。
例如，test的rem的值为10，
.test{
width: 10rem;
height: 10rem;
background-color: #ff7d42;
}
image
可以看到test的font-size继承了html的值24px，而此时宽高为24*10=240px
总结
1.rem单位翻译为像素值的时候是由html元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式的在html为font-size重写一个单位。
2.em单位转换为像素值的时候，取决于使用它们的元素的font-size的大小，但是有因为有继承关系，所以比较复杂。
优缺点
em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能,
em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算
flex布局及优缺点
https://juejin.im/post/599970f4518825243a78b9d5#heading-22
css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；
image.png
image.png
rem布局及其优缺点
首先rem相对于根(html)的font-size大小来计算。简单的说它就是一个相对单例如:font-size:10px;,那么（1rem = 10px）了解计算原理后
首先解决怎么在不同设备上设置html的font-size大小。其实rem布局的本质是等比缩放，一般是基于宽度。
优点
可以快速适用移动端布局 字体图片 高度
缺点
①目前ie不支持，对pc页面来讲使用次数不多；
②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
③在响应式布局中，必须通过js来动态控制根元素font-size的大小。
也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。
百分比布局
1、具体分析
除了用px结合媒体查询实现响应式布局外，我们也可以通过百分比单位 " % " 来实现响应式的效果。比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。为了了解百分比布局，首先要了解的问题是：css中的子元素中的百分比（%）到底是谁的百分比？
直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width。当然这种理解是正确的，但是根据css的盒式模型，除了height、width属性外，还具有padding、border、margin等等属性。那么这些属性设置成百分比，是根据父元素的那些属性呢？此外还有border-radius和translate等属性中的百分比，又是相对于什么呢？下面来具体分析。
padding、border、margin等等属不论是垂直方向还是水平方向，都相对于直接父元素的width。
除了border-radius外，还有比如translate、background-size等都是相对于自身的。
2、百分比单位布局应用
比如我们要实现一个固定长宽比的长方形，比如要实现一个长宽比为4:3的长方形,我们可以根据padding属性来实现，因为padding不管是垂直方向还是水平方向，百分比单位都相对于父元素的宽度，因此我们可以设置padding-top为百分比来实现，长宽自适应的长方形：
.trangle{
height:0;
width:100%;
padding-top:75%;
}
3、百分比单位缺点
从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：
（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
（2）从小节1可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。
image.png
image.png
移动端适配1px的问题
https://blog.csdn.net/weixin_43675871/article/details/84023447
首先，我们了解devicePixelRatio（DPR）这个东西
在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px，这是因为不同的移动设备有不同的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素 1px变粗的原因：viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性,它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3,css里写的1px长度映射到物理像素上就有2px或3px那么长
1.用小数来写px值 （不推荐）
IOS8下已经支持带小数的px值, media query 对应 devicePixelRatio 有个查询值 -webkit-min-device-pixel-ratio, css可以写成这样
通过-webkit-min-device-pixel-ratio设置。
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
如果使用less/sass的话只是加了1句mixin
缺点: 安卓与低版本IOS不适用, 这个或许是未来的标准写法, 现在不做指望
2、flexible.js
这是淘宝移动端采取的方案, github的地址:https://github.com/amfe/lib-flexible. 前面已经说过1px变粗的原因就在于一刀切的设置 viewport 宽度, 如果能把 viewport 宽度设置为实际的设备物理宽度, css 里的 1px 不就等于实际 1px 长了么. flexible.js 就是这样干的.
<meta name=”viewport”>里面的 scale 值指的是对 ideal viewport 的缩放, flexible.js 检测到 IOS 机型, 会算出 scale = 1/devicePixelRatio, 然后设置viewport
3、伪类+transform实现
对于解决1px边框问题，我个人觉得最完美的解决办法还是伪类+transform比较好。
原理：是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
media query
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。
但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media
方便应用广泛 适用于 pc端 手机页面，通常做自适应布局时 我们比较常用。
缺点：相对于代码要重复很多，得知道设备的宽度，手机的分辨率很多所以麻烦了点，不过性能方面肯定最高； 可能存在闪屏的问题
@media处理手机和pc端界面兼容的问题，在IE 上的访问出现问题，百度方法，找找两种，一种是respond.js，另一种是css3-mediaquerieshttp://blog.csdn.net/small_tu/article/details/47317453
移动端性能优化相关经验
https://blog.csdn.net/tangxiujiang/article/details/79791545
toB 和 toC 项目的区别。
to B（business）即面向企业，to C（ customer）即面向普通用户
简单的事情重复去做，重复的事情用心去做，长期坚持，自然功成，无论是B端还是C端都同样适用。
Tob与Toc的区别
作者 猪八戒网 • 10-11 10:18:49 阅读 419
oB产品价值何来？
最近团队在toB产品研究的过程中，得出结论，相对于toC产品与服务，toC产品更注重产品用户的共性而淡化角色关系，而toB产品则更强调面向用户、客户的角色关系，而淡化共性提取。实际上，这是由服务对象所引起的，C端产品的服务对象，由终端所限，是一个面向个体的服务。而B端服务使用最终是面向一个系统体系组织，在干系人间配合使用中发挥产品价值。
一个好的产品toB可以让组织的系统变得更好，最终反哺于系统中的各个单位。
需求动力之不同toC的产品方法论，用户体验是几乎最为重要的需求来源，腾讯此前，也以"以用户体验为归依"来驱动企业产品打造。
但B端产品则不同，B端在一个商业的背景之下，B端的决策思路是，"以企业获益为归依"，系统是否有利于企业的生产力，竞争力等，单纯的用户体验，仅能让员工得到片刻的享受， 但无法说服企业，企业并不会为一个不能"赚钱"的东西买单。
需求动力的不同，引发的这是购买使用决策体系的变化。
toB产品应更考虑 获益与系统性价值，部分情况还有可能会牺牲掉局部个体的利益，对于使用者而言应该是自律或他律的，toC产品则更考虑的是个体用户的偏好，并长时间内，基于技术效率的提升，产品的服务中心更多地围绕着更高效地帮助用户的"欲望"释放进行设计，对于使用者而言是一个释放自我的存在。
移动端兼容性
https://zhuanlan.zhihu.com/p/28206065
1.IOS移动端click事件300ms的延迟相应
3.h5底部输入框被键盘遮挡问题
10.CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
9.上下拉动滚动条时卡顿、慢
body {-webkit-overflow-scrolling:
touch;overflow-scrolling: touch;}
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
小程序
移动端手势
image.png
image.png
webview与原生应用交互
安卓Activity之间数据是怎么传递的
安卓4.0到6.0过程中WebView对js兼容性的变化
WebView和原生是如何通信
如何实现H5手机端的适配
2X图 3X图适配
实际程序开发当中，我们代码中用的值是指逻辑分辨率pt，而不是像素分辨率px，比如我们定义一个按钮的高度为45，这个45指的是45pt而不是45px。在非Retina屏下1pt = 1px，4和4.7寸Retina屏下1pt = 2px，5.5和x下1pt = 3px.我们制作不同尺寸的图片，比如@1x为22px，则@2x为44px，@3x为66px，命名分别为image.png，在项目的Assets.xcassets中新建New Image Set，修改名字为image，并把相应尺寸的图片拖放至相应位置。
/* 根据dpr显示2x图/3x图 */
.bg-image(@url){
background-image:~"url('@{url}@2x.png')";
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
background-image:~"url('@{url}@3x.png')";
}
}
.bg-color(@color) {
background-color: @color;
}
图片在安卓上，有些设备模糊问题
image.png
固定定位布局键盘挡住输入框内容
image.png
image.png
click的300ms延迟问题和点击穿透问题
https://www.jianshu.com/p/6e2b68a93c88
image.png
方案二：FastClick
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。
image.png
phone及ipad下输入框默认内阴影
image.png
防止手机中页面放大和缩小
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
px、em、rem、%、vw、vh、vm这些单位的区别
https://www.jianshu.com/p/ba26509bc5b3
移动端适配- dpr浅析
https://www.jianshu.com/p/cf600c2930cb
dpr = 物理像素 / css像素
在dpr = 2； 1px的css像素在设备中是2px的物理像素，这会导致在设备上看上去1px的边框是2px
解决方法：
用transfrom： scale（）缩小dpr倍数
在meta标签中设定scale缩小两倍
移动端扩展点击区域
父级代理事件
将a标签设置成块级元素
上下拉动滚动条时卡顿、慢
image.png
长时间按住页面出现闪退
image.png
ios和android下触摸元素时出现半透明灰色遮罩
image.png
active兼容处理 即 伪类：active失效
https://blog.csdn.net/diaobuwei1238/article/details/101716814
将 :visited放到最后，则会导致以下结果：若链接已经被访问过，a:visited会覆盖:active和:hover的样式声明，链接将总是呈现为紫色，无论鼠标悬停还是按下激活，链接都将保持为紫色。
基于此原因，上述代码必须按照顺序定义，一般称为LVHA-order: :link — :visited — :hover — :active，为方便记忆，可记为“LOVE HATE”
image.png
webkit mask兼容处理
https://segmentfault.com/a/1190000011838367
image.png
image.png
pc端与移动端字体大小的问题
transiton闪屏
//设置内联的元素在3D空间如何呈现：保留3D-webkit-transform-style:preserve-3D;
//设置进行转换的元素的背面在面对用户时是否可见：隐藏-webkit-backface-visibility:hidden;
圆角bug
image.png
网友评论