@media screen 自适应笔记

在css中使用@media screen 通过检索宽度 对应改变html中class的css属性。

1280分辨率以上（大于1200px）

@media screen and (min-width:1200px){
　　.content{ width: 1100px; height:500px;}
　　.left{width:500px;hegith:1000px;background:#000;}
　　.right{width:500px;hegith:1000px; marigin-left:100px; background:#000;}
}

1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
　　.content{ width: 1100px; height:500px;}
　　.left{width:500px;hegith:1000px;background:#666;}
　　.right{width:500px;hegith:1000px; marigin-left:100px; background:#666;}
}

标黄位置，当尺寸大于1200像素时候 HTML中的.left .right背景色会显示黑色

当尺寸在960~1199像素之间 HTML的.left .right 背景色会显示灰色