【移动端适配、动态REM】
当我们准备在移动端写HTML的时候，首先需要考虑到手机显示屏幕的大小与PC的差异性。
我们可以通过两种方式进行媒体查询来区分移动端和PC端的访问用户。
第一种，
<style>
@media (min-width:500) and (max-width: 1000px)
.class{ background: #ccc; }
</style>
当屏幕尺寸大于500像素且小于1000像素时，应用下面的CSS样式.class { background: #ccc; } ，可以通过添加多个@media css样式来满足不同的屏幕宽度页面需求；
第二种
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 500px) and (max-width: 1280px)">
当屏幕的宽度大于500像素且小于1280像素时，引用的style.css文件生效
在实际应用中，对于移动端和PC端的页面制作一般有两种方案，其一是将PC和移动端的代码都写在一个HTML中，通过在不同情况下对页面内容的隐藏来调整页面布局，这也被称为响应式页面，一般用于博客，新闻网站等相对简易的网页。因为响应式页面这种方案仍有以下缺点：
一、在页面展示上和人机交互上，只是改善移动端的体验，但是并没有达到最好的用户体验；
二、不同端的用户需求不一样，这套方案不利于百度或者其他搜索引擎的关键词优化和排名。
三、响应式网站无法区分移动端，浪费带宽，加载耗时长。
四、响应式页面兼容性不高
第二种方案则是直接将两个端的HTML文件分开写，PC和移动端的使用不同的链接，这个方案常用于在需要应对比较复杂的业务逻辑复杂网页，由两班人分开负责。
由于历史原因，导致我们制作的移动端HTML文件会在手机上被当做PC端页面进行等比缩放，我们可以通过{document.documentElement.clientWidth}获取屏幕宽度来印证。
然后我们需要解决这个问题只要先在HTML的头部设置一个<meta>属性：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
将页面宽度设置为与设备宽度相等，禁止用户缩放，最大最小缩放倍数都等于1.0，这样就可以让我们的移动端页面正常显示了。
移动端与PC端的交互方式的差异
- 没有 hover
- 有 touch 事件
- 没有 resize
- 没有滚动条
px，em，rem都是长度单位
em：相对长度单位，这个单位表示元素的font-size的计算值。如果用在font-size 属性本身，它会继承父元素的font-size。通常可被认为等同一个 ' m ' 或一个汉字的长度。
rem：这个单位代表根元素的 font-size 大小（即 <html> 元素的font-size）。
当用在根元素的font-size上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em。
当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍)。
该单位在实际使用中一般用于创建完美的可扩展布局。如果不被目标浏览器支持，可以使用em单位，虽然会稍微复杂一些。【摘自 - MDN】
根据rem的特性，可以通过JavaScript将页面宽度与<html> 元素的font-size绑定，然后再通过利用rem来做其他所有元素的长度单位，即可实现不同手机不同尺寸屏幕的等比缩放。
【<html> 元素的font-size不要小于12px】
<script>
var pagewidth = window.innerWidth
document.write('<style>html{font-size:' + pagewidth + 'px;}</style>')
</script>
当设计稿给要求的页面是以px为长度单位时，为了减少手动将每一个元素长度单位换算的时间，可以使用SASS操作提高效率
