本文目录：
- .说一说<meta name="viewport"/>的常见属性
- 2.使用 rem 布局的优缺点
- 3.jsBridge是什么？
- 4.PWA是什么？，讲下核心点
1.说一说<meta name="viewport"/>的常见属性
viewport的常用属性都是写在content里，多个属性之间用逗号隔开。常见的有width，initial-scal，maximum-scale / minimum-scale，user-scalable
width
<meta name="viewport" content="width=1000" />
- document.documentElement.clientWidth 输出 1000
- div 宽度 1000px 时，横向刚好铺满屏幕，超过出现横向滚动条
<meta name="viewport" content="width=device-width" />
效果等同于 width=375
document.documentElement.clientWidth 输出 375
div 宽度 375px 时，横向刚好铺满屏幕，超过出现横向滚动条
initial-scal
<meta name="viewport" content="initial-scale=1" />
效果等同于 width=device-width
<meta name="viewport" content="initial-scale=2" />
document.documentElement.clientWidth 输出 188 (375/2)
div 宽度 188px 时，横向刚好铺满屏幕，超过出现横向滚动条
scale 倍数越小，视口越大
maximum-scale / minimum-scale
<meta
name="viewport"
content="initial-scale=2,minimum-scale=1,maximum-scale=3"
/>
允许用户进行缩放的最小倍数和最大倍数
user-scalable
<meta name="viewport" content="initial-scale=1,user-scalable=no" />
是否允许用户进行缩放，默认值是yes
2.使用 rem 布局的优缺点
优点
等比缩放，百分百还原，特别适合纯移动端app布局使用。
缺点
1.计算量大，可以通过插件解决
2.字体不适合用rem，因为字体的大小和字体宽度，并不成线性关系，可以给body标签赋值一个默认的字体大小px，然后需要设置字体大小的元素用em，不定义的话则默认继承。
如果既想用em，又想使用响应式，则需要用到媒体查询
@media screen and (min-width: 320px) {
body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
body {font-size: 18px}
}
@media screen and (min-width: 641px) {
body {font-size: 20px}
}
p {font-size: 1.2em}
p a {font-size: 1.2em}
3.兼容性问题，IE不支持rem
4.灵活性差，如果全部使用rem进行布局的话，有的大屏用户想看到更多的字，有的想看到更大字或者图标，而rem会扼杀这种选择。
3.jsBridge是什么？
jsBridge主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能（例如：地址位置、摄像头）。
而且 JSBridge 的功能不止调用 Native 功能这么简单宽泛。实际上，JSBridge 就像其名称中的Bridge的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是构建 Native 和非 Native 间消息通信的通道，而且这个通信的通道是双向的。
1.JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。
2.Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。
4.PWA是什么？，讲下核心点
渐进式网络应用程序(Progressive Web Application - PWA)，是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的网络技术来实现的。
核心技术：
- Web App Manifest – 在主屏幕添加app图标，定义手机标题栏颜色之类
- Service Worker – 缓存，离线开发，以及地理位置信息处理等
- App Shell – 先显示APP的主结构，再填充主数据，更快显示更好体验
- Push Notification – 消息推送
