首先是名词介绍：像素：Pixel，就是物理像素：也就是设备像素，逻辑像素：（css像素）单位为 px设备像素比：devicePixelRatio，（在高倍屏会出现1px变大的问题）。css单位em：相对于当前对象内文本的字体尺寸

本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。

为了提高代码的兼容性，我们有时需要判断当前系统的平台，然后做一些适配。比如，我们在使用 StatusBar 做导航栏的时候，在 iOS 平台下根视图的位置默认情况下是占据状态栏的位置的，我们通常希望状态栏下面能显示一个导航栏

网站适配的终端可以用js或媒体查询的方式获取，分配对应的样式。布局上采用相对单位,百分比和flex的弹性方式。对移动端的特殊性进行适配，如1px问题，默认样式等。

em与rem之间的区别：共同点：它们都是像素单位，它们都是相对单位。不同点：em大小是基于父元素的字体大小，rem大小是基于根元素(html)的字体的大小

判断是否是IPhoneX手机；增加fix-iphonex-bottom样式，如果想更改IPhoneX底部34像素的背景颜色怎么办呢？增加iphone-footer-bg样式

关于移动端适配的技术方案主要有以下四种：（1）通过媒体查询的方式即CSS3的meida queries（2）以天猫首页为代表的 flex 弹性布局（3）以淘宝首页为代表的 rem+viewport缩放（4）rem 方式

像素 ：像素是屏幕显示最小的单位。设备像素 ：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。 iPhone5 的物理像素是 640 X 1136

在全面屏的 iPhone X 上，不需要而外的代码，Safari 可以非常完美的展示现有的网站。整个网站的内容都会自动地展示在一个“安全区域”内，并不会被四周的圆角或者“小刘海”遮挡住。