1.rem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Document</title>
<style> html{
font-size: 20px; //设置1rem代表的大小，一般选用20比较好计算
} body{
margin:0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
(function (doc, win){
var html = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //手机横屏，竖屏可在此处设置
recalc = function(){
var clientWidth = html.clientWidth;
if (!clientWidth) return;
docE1.style.fontSize = 20*(clientWidth/320) + 'px'; //以iphone4屏幕为基准
}; if (!doc.addEventListener) return;
win.addEventListener('DOMContentLoaded', recalc, false); //$(window).on('resize',function(){})
})(document, window);
</script>
</body>
</html>
上述代码，便是屏幕适配的整个框架，可以适用手机，平板，电脑。
可以在其中写入自己的代码，以rem为单位（此代码1rem=20px）；
有缩放效果，以px为单位，是绝对值，不会随着屏幕大小的改变，而改变；
以百分比为单位，注意将标签的所有父元素都已百分比为单位，同样有缩放效果；
2.从css角度考虑
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
margin:0;
padding:0;
}
.wp{
width:800px;
}
@media screen and (min-width: 1000px){ } @media screen and (min-width: 640px) and (max-width:999px){
.wp{
width:800px;
}
} @media screen and (max-width:639px){
.wp{
width:800px; }
}
</style>
</head>
<body>
<div class="wp">
</div>
</body>
</html>
上述代码中一个@media代表一种屏幕大小，相当于js中的一个if语句，然后将在不同屏幕下显示的样式分别写进自己的@media中，这种情况代码量比较大，屏幕中类也挺多的