PC：
1: 针对IE：IE有个zoom属性。虽然经常我们用它来清浮动什么的。但是它在缩放元素上也是很强大的。eg：被设置zoom:0.5的元素会以该元素的左上角为原点在直接被缩小一半，所占据的文档流内体积也会减少一半（IE7和8+对zoom后的元素的margin值理解不同可以注意下，不过单纯缩放元素时不太需要用到）。
firefox下呢，就可以使用css3的transform:scale()。（需要额外设置transform-origin:0 0为缩放原点）。
另外zoom也被webkit支持，scale还是zoom请自行选择~
2. 接下来我们就可以按设计稿直接切成成一个巨大无比的1920*1000的页面。
3. 然后获取用户的当前窗口尺寸，eg当前窗口宽1200，那么我们需要缩放的比例zoom=1200/1920=0.625。然后把我们的主显示的父框缩小0.625倍就可以啦~（当然为了高度不出滚动条，高度的尺寸也要纳入计算范围）
Mobile：
移动端虽然整体尺寸小+倒下去竖起来的尺寸差别太大，但是本质和PC端页面没什么区别。
常见的自适应就是：
1. 响应式，media queries配合百分比让页面内容自然的去适应(http://game.qq.com)；
2. 根据浏览器尺寸然后进行动态的定位
如果单独做手机端的页面，用上述方法做自然正常显示不是问题，但是当时间紧任务重或者资源不够需要PC和手机使用同一套页面时，如何适应手机就是个需要考虑的问题了。
一个小栗子：
-----------HTML+CSS-----------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.img-contain{
border: 1px solid red;
margin: auto;
}
.img-contain img{
100%;
}
.img-contain p{
font-size: 22px;
}
</style>
</head>
<body>
<div class="img-contain" id="img-contain">
<p>附件二维我购房金额为非叫我我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我奥奇附件二维奉节我附件二维减肥IE我欠费我欺负见覅诶我去见覅饿哦我去房间诶我发及诶我去飞机我去见覅饿哦我去房间诶千万房间诶我击飞我去</p>
<img src="./img/PC.jpg" alt=""/>
</div>
<script src="test.js"></script>
</body>
</html>
-----------js-----------
/**
* Created by Administrator on 2017/12/7.
*/
window.onload= function () {
window.onresize = function(){
var W = document.body.clientWidth;
var n = W/1920;
if (navigator.userAgent.indexOf('Firefox') >= 0) {
document.getElementById("img-contain").setAttribute("style","transform:scale("+n+")").setAttribute("style","transform-origin:0 0");
} else {
document.getElementById("img-contain").setAttribute("style","zoom:"+n);
}
};
};