一、有多少种分辨率？
1920*1080
1680*1050
1600*1200/900
1440*900
1400*1050/900
1366*768
1360*1024/768
1280*1024/960/768/720/800/600
1024*768
二、如何使自己写的代码适应不同的分辨率?
第一种办法：采用百分比。适合代码内容超过1024的宽度下使用。
第二种方法：采用固定宽度。适合代码没有超过1024的宽度下使用。
第三种办法：box-sizing。box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
第四种方法：box-flex。 规定框的子元素是否可伸缩其尺寸。
第五种方法：@media-screen。
接下来对这五种方法进行分别介绍：
第三种方法：
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内，其实就是怪异模式了~
ie8+浏览器支持content-box和border-box；
ff则支持全部三个值。
使用时：
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
50%;
border:1px solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据了左边的一半。.</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>
</body>
</html>
第四种方法：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
300px;
border:1px solid black;
}
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">W3School</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>
