登陆界面针对不同分辨率的兼容性调整（媒体查询）

借鉴于某网站的写法，网上资料很杂，很多方式屡试不爽，谷歌亲测就这个有效：(注意顺序)

在各个不同的分辨率下，不断调整使之变化的关键属性。实验得知公共的部分（即在媒体查询部分之外有公共的部分，且这些内容是在谷歌浏览器在分辨率为67%时的状态，都不在这些媒体查询之内）的内容很重要，要是改变了公共的部分需要将改变的部分分别写在对应的媒体查询范围内部，否则将牵一发而动全身，越改越乱。。。。。

@media screen and (max-width:1024px){}

@media screen and (min-width:1025px) and (max-width:1280px) {}

@media screen and (min-width:1281px) and (max-width:1440px){}

@media screen and (min-width:1441px) and (max-width:1680px){}

@media screen and (min-width:1681px) and (max-width:1920px){}

核心代码如下：

@media screen and (max-width:1024px){

.login_title {
width: 390px;
right: 12%;
}

h2.modal-title {
right: 11%;
font-size: 22px;
top: -74px;}
}
.form-horizontal .form-group{
margin-left: 11px;
margin-right: -10px;
}

@media screen and (min-width:1025px) and (max-width:1280px) {

.login_title {
width: 481px;
right: 11%;
}
.form-horizontal .form-group{
margin-left: -60px;
margin-right: -10px;
}
.login-bg .container1 .modal-dialog1{
right: -19%;
top: -15%;
}
form#loginForm{
margin-right: -16%;
margin-top: 7%;
}
h2.modal-title {
font-size: 26px;
top: -78px;
right: 12%;}

.form-horizontal .control-label2{
margin-right: -3%;
margin-left: 1%;
line-height: 1.5em;
}
.reset, .login{
width: 90px;
height: 30px;
margin-right: 11%;
}
input#showPassword{
margin-left: -212%;
}
label.remberPwd{
margin-left: -18%;
margin-top: -1%;
}
p{
margin: 48px 0 -18px 327px;

}
}

@media screen and (min-width:1281px) and (max-width:1440px){

.login_title {
width: 550px;
right: 12%;
}
.form-horizontal .control-label2{
margin-left: -2%;
margin-right: -1%;
}
.form-horizontal .form-group{
margin-left: -60px;
margin-right: -10px;
}
h2.modal-title {
font-size:33px;
right: 7%;
top: -86px;
}
.login-bg .container1 .modal-dialog1{
right: -19%;
}
.reset, .login{
margin-right: 7%;
}
label.remberPwd{
margin-left: -24%;
margin-top: -1%;
}
}

@media screen and (min-width:1441px) and (max-width:1680px){
.form-horizontal .form-group{
margin-left: -60px;
margin-right: -10px;
}
.form-horizontal .control-label2{
margin-right: -1%;
margin-left: -4%;
}
.login_title {
width: 630px;
right: 12%;
}
input#showPassword{
margin-left: -111%;
}
label.remberPwd{
margin-left: -21%;
margin-top: -2%;
}
.login-bg .container1 .modal-dialog1{
right: -18%;
top: -17%;
}
.form-horizontal .form-group{
margin-left: -20px;
margin-right: 51px;
}
.reset, .login{
width: 133px;
margin-right: 7%;
}

h2.modal-title {
font-size:35px;
top: -92px;
right: 10%;}
}

@media screen and (min-width:1681px) and (max-width:1920px){
.form-horizontal .form-group{
margin-left: -60px;
margin-right: -10px;
}
.login_title {
width: 692px;
right: 12%;
}
input#showPassword{
margin-left: -111%;
}
label.remberPwd{
margin-left: -28%;
margin-top: -2%;
}
.login-bg .container1 .modal-dialog1{
right: -19%;
top: -16%;
width: 32%;
}
.form-horizontal .control-label2{
margin-right: -11%;
margin-left: 2%;
}

p{
margin: 59px 34px -10px 442px;
}

.reset, .login{
margin-right: 13%;
width: 155px;
}

h2.modal-title {
font-size:40px;
right: 8%;
top: -97px;}
}