@media 根据屏幕宽度,改变样式

为不同页面宽度设置不同的CSS样式——页面宽度大于1150px和页面宽度等于1150px时分别为.login-wrapper设置不同的左边距。

@media only screen and (min-width: 1150px) {

    .login-wrapper {

          left: 24%;

    }

}

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

   .login-wrapper {

      left: 24%;

   }

}

如果文档宽度小于 1150 像素则左边距改变,

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

    .login-wrapper {

        left: 5%;

    }

}

前提:

.login-wrapper {

    left: 5%;// 没有left这个设置

}

①　使用 @media 查询可以针对不同的媒体类型定义不同的样式。

②　@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面。

③　重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

新手上路,勿喷