努力努力再努力

一、有多少种分辨率？

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>

</body>
</html>