zoukankan      html  css  js  c++  java
  • 登陆界面针对不同分辨率的兼容性调整(媒体查询)

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

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

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

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

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

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

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

    核心代码如下:

    @media screen and (max-1024px){

    .login_title {
    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-1025px) and (max-1280px) {

    .login_title {
    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{
    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-1281px) and (max-1440px){

    .login_title {
    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-1441px) and (max-1680px){
    .form-horizontal .form-group{
    margin-left: -60px;
    margin-right: -10px;
    }
    .form-horizontal .control-label2{
    margin-right: -1%;
    margin-left: -4%;
    }
    .login_title {
    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{
    133px;
    margin-right: 7%;
    }

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


    @media screen and (min-1681px) and (max-1920px){
    .form-horizontal .form-group{
    margin-left: -60px;
    margin-right: -10px;
    }
    .login_title {
    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%;
    32%;
    }
    .form-horizontal .control-label2{
    margin-right: -11%;
    margin-left: 2%;
    }

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

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


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

    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    iOS开发中应用程序图标和启动图片的尺寸
    Localization native development region 设置属性(转)
    iOS 开发之 ZBarSDK 二维码扫描自定义二维码扫描页面(二)
    iOS 开发之 ZBarSDK 二维码扫描 静态库不支持64bit完美解决(一)
    iOS 播放Gif动画
    使用GCD异步下载图片 可以中途停止下载
    GCD线程队列 MJ(转)
    iOS 开发之头部滚动展示视图
    iOS 版本更新 (转)
    iOS App打包发布 (转)
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/9685824.html
Copyright © 2011-2022 走看看