知道 PWA 吗

参考回答：

PWA 全称 Progressive Web App，即渐进式 WEB 应用。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。

移动布局方案

参考回答：

https://juejin.im/post/599970f4518825243a78b9d5heading-22

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; }

可以看到 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/599970f4518825243a78b9d5heading-22

css3 引入的，flex 布局；优点在于其容易上手，根据 flex 规则很容易达到某个布局效果， 然而缺点是： 浏览器兼容性比较差， 只能兼容到 ie9 及以上；

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 则是相对于元素自身等等， 造成我 们使用百分比单位容易使布局问题变得复杂。

移动端适配 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 就是这样 干的.

里面的 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 图， 通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么 多套样式代码会很繁琐。

@mediascreenand(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 的区别

oB 产品价值何来？

最近团队在 toB 产品研究的过程中，得出结论，相对于 toC 产品与服务，toC 产品更注重 产品用户的共性而淡化角色关系， 而 toB 产品则更强调面向用户 、客户的角色关系， 而 淡化共性提取。实际上，这是由服务对象所引起的，C 端产品的服务对象，由终端所限， 是一个面向个体的服务。而 B 端服务使用最终是面向一个系统体系组织，在干系人间配 合使用中发挥产品价值。

一个好的产品 toB 可以让组织的系统变得更好， 最终反哺于系统中的各个单位。

需求动力之不同 toC 的产品方法论， 用户体验是几乎最为重要的需求来源， 腾讯此前， 也以"以用户体验为归依"来驱动企业产品打造。

但 B 端产品则不同，B 端在一个商业的背景之下，B 端的决策思路是，"以企业获益为归 依"， 系统是否有利于企业的生产力， 竞争力等， 单纯的用户体验， 仅能让员工得到片 刻的享受， 但无法说服企业， 企业并不会为一个不能"赚钱"的东西买单。

需求动力的不同， 引发的这是购买使用决策体系的变化。

toB 产品应更考虑 获益与系统性价值，部分情况还有可能会牺牲掉局部个体的利益，对 于使用者而言应该是自律或他律的， toC 产品则更考虑的是个体用户的偏好， 并长时间 内，基于技术效率的提升， 产品的服务中心更多地围绕着更高效地帮助用户的"欲望"释 放进行设计， 对于使用者而言是一个释放自我的存在。

移动端兼容性

参考回答：

https://zhuanlan.zhihu.com/p/28206065

1.IOS 移动端 click 事件 300ms 的延迟相应

2.h5 底部输入框被键盘遮挡问题

3.CSS 动画页面闪白,动画卡顿

解决方法:

1.尽可能地使用合成属性 transform 和 opacity 来设计 CSS3 动画， 不使用 position 的 left 和 top 来定位

2.开启硬件加速

3.上下拉动滚动条时卡顿 、慢

body {-webkit-overflow-scrolling:

touch;overflow-scrolling: touch;}

Android3+和 iOS5+支持 CSS3 的新属性为 overflow-scrolling

小程序

参考回答：

移动端手势

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; }

图片在安卓上， 有些设备模糊问题

参考回答：

固定定位布局键盘挡住输入框内容

参考回答：

click 的 300ms 延迟问题和点击穿透问题

参考回答：

https://www.jianshu.com/p/6e2b68a93c88

方案二： FastClick

FastClick是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个 轻量级的库 。FastClick 的实现原理是在检测到 touchend 事件的时候， 会通过 DOM 自定 义事件立即出发模拟一个 click 事件， 并把浏览器在 300ms 之后的 click 事件阻止掉。

phone 及 ipad 下输入框默认内阴影

参考回答：

防止手机中页面放大和缩小

参考回答：

<metaname="viewport"content="user-scalable=no"><metaname="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 标签设置成块级元素

上下拉动滚动条时卡顿 、慢

参考回答：

长时间按住页面出现闪退

参考回答：

ios 和 android 下触摸元素时出现半透明灰色遮罩

参考回答：

active 兼容处理 即伪类： active 失效

参考回答：

https://blog.csdn.net/diaobuwei1238/article/details/101716814

将 :visited 放到最后， 则会导致以下结果： 若链接已经被访问过， a:visited 会覆盖:active

和:hover 的样式声明， 链接将总是呈现为紫色， 无论鼠标悬停还是按下激活， 链接都将 保持为紫色 。 基于此原因， 上述代码必须按照顺序定义， 一般称为 LVHA-order: :link — :visited — :hover — :active， 为方便记忆， 可记为LOVE HATE

webkit mask 兼容处理

参考回答：

https://segmentfault.com/a/1190000011838367

transiton 闪屏

参考回答：

//设置内联的元素在 3D 空间如何呈现： 保留3D-webkit-transform-style:preserve-3D;

//设置进行转换的元素的背面在面对用户时是否可见：隐藏webkit-backface-visibility:hidden;

圆角 bug

参考回答：