1.需求：
接到的需求是做一个官网，同一个网址，在PC端和移动端显示不同，2套并不是简单的隐藏显示的差别。
2.想法：
最先想到的是css3的媒体查询 media-screen 控制在不同尺寸下显示。这里说个题外话，css中的像素单位px，是逻辑像素。不是设备的实际像素。但是，这个临界值并不好设置。
那就用js实现吧，js可以根据navigator.userAgent来识别浏览器。
做法：通过js控制显示的最外层的div(body的子元素)：
<body> <div id="container-pc"> <!--PC端内容--> </div> <div id="container-mobile"> <!--移动端内容--> </div> </body>
(function () {
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
var containerPC = document.getElementById('container-pc');
var containerMobile = document.getElementById('container-mobile');
getRem();
addEvent();
function getRem() {
if (isMobile) {
containerPC.innerHTML = '';
var bodyWidth = document.body.offsetWidth;
//chrome最小字体的限制，放大100倍。保证根节点大于12px
document.documentElement.style.fontSize = (bodyWidth / 768)*100 + 'px' ;
window.onresize = function () {
getRem();
};
} else {//PC
containerMobile.innerHTML = '';
}
}
})()
PC端网页设计有最大宽度（比如1920px），还有个内容区域宽度（一般在960px-1200px的范围内）
移动端网页是一个自适应的网页，设计一般给一张宽750px的设计图，需要我们将这个设计图100%显示，在不同设备上进行缩放，固定的px单位无法满足，那就要用到rem这个单位。通过对html节点设置fong-size大小，局部大小就由这个基准决定。我们的设计图宽度是768px,在js代码里有体现，上面代码的第12行：
document.documentElement.style.fontSize = (bodyWidth / 768)*100 + 'px' ;
由于chrome最小字体的限制，根节点html的font-size不能小于12px,所以我们浏览器宽度跟设计图的宽度比放大100倍。写css的时候，设计图标注的宽度要缩小100.比如一个区域设计标注230px*150px,那在css里就是：
2.30rem; height:1.50rem;
3.问题：
这样做，PC，移动端显示没有问题，但是在移动端打开，会加载pc端的资源，如图片，因为即使display:none，里面的img标签的图片也会被加载。但是也仅仅是加载<img>里的图片，不会加载background-image的图片，还可以接受。
移动端因为是自适应的网页，所以窗口缩放都要重新计算rem的基准。pc端可以用鼠标拖动缩放浏览器窗口，但是很少见到能缩放的移动端。所以这个计算好像也没那个必要。
对于网页中的mp4文件，如果在<video>中，在国产安卓浏览器播放会浮到最上层，这个做法是做个播放弹窗。<video>资源会默认进入页面加载，导致页面非常慢。可以加个封面，再设置为不预加载。
<video poster="封面图片的地址" preload="none"></video>