电脑不同的分辨率自适应显示

          用一个简单地例子来说一下， 首先看一下源代码：

                     <div class="box">
                            <p>生活中总用一些人会扰乱你的心绪，只要心里有一方净土就可以保持纯洁。</p>
                     </div>

             接下来是对样式进行的修饰：

                   .box {
                         margin:0 auto;
                         width:300px;
                         height:300px;
                         border:3px dashed red; /*边框设置粗一些*/
                         }

                /*最小宽度的适应*/
                @media screen and (min-width:1201px) {
                  .box {
                        width:1200px;
                            }
                        }

               /*当屏幕宽度最大为1200*/
                 @media screen and (max-width:1200px) {
                  .box {
                     width:900px;
                           }
                       }

             /*当屏幕宽度最大为900*/
                 @media screen and ( max-width:900px) {
               .box {
                   width:200px;
                        } 
                     }

              /*当屏幕宽度最大为500*/
                @media screen and (max-width:500px) {
               .box {
                 width:100px;
                  }
              }

     最后在浏览器中预览就可以看到你想要的结果。

     新手上车，希望大家多多指教，谢谢~