css样式使用@media screen实现网页布局的自适应

// 最大分辨率宽度为1024时，对标签进行控制
@media screen and (max-width: 1024px) {
.sh-loginBox{background:none; background-color: transparent;-webkit-box-shadow:none;box-shadow:none;}
.sh-lbTxt{border-color: #dad6d3;}
.sh-loginBox>.sh-lbBottomLine{display: none;}
}
//	最大分辨率宽度为600时，对对应标签控制
@media screen and (max-width: 600px) {
.sh-loginBody{background-size:cover;}
.sh-loginBox>h1{padding-left:calc((100% - 270px)/2);}
.sh-lbTxt,.sh-lbBt{width: 100%;}
.sh-loginBox{position: inherit;top: 20px;left: inherit;margin: 0 auto;width: 90%;}
}
//	最大分辨率高度为360时，控制按钮控制
@media screen and (max-height: 360px) {
.sh-bottomBar{display: none;}
}
// 组合分辨率 ：1100分辨率（大于960px，小于1199px）
@media screen and (min-width: 960px) and (max-width: 1199px) {
#content_body{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}

以上为简单通过@media screen属性，判断屏幕分辨率，输出不同类型的页面风格，并且 无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加此属性,根据浏览器宽度判断并输出不同的长宽值，希望以上样例对朋友们有所帮助