CSS Media Queries (several statements followed)

Navigation
1

Hello, I want to know if it is possible to get a cleaner and more compact solution from the following CSS. 

    @media screen and (min-width: 630px) {
        .tab ul.login{
            right: 29%;
        }
    }

    @media screen and (min-width: 760px) {
        .tab ul.login{
            right: 27%;
        }
    }

    @media screen and (min-width: 830px) {
        .tab ul.login{
            right: 30%;
        }
    }

    @media screen and (min-width: 990px) {
        .tab ul.login{
            right: 21%;
        }
    }


    @media screen and (min-width: 1030px) {
        .tab ul.login{
            right: 24%;
        }
    }

    @media screen and (min-width: 1160px) {
        .tab ul.login{
            right: 25%;
        }
    }

    @media screen and (min-width: 1200px) {
        .tab ul.login{
            right: 19%;
        }
    }

    @media screen and (min-width: 1300px) {
        .tab ul.login{
            right: 21%;
        }
    }

    @media screen and (min-width: 1400px) {
        .tab ul.login{
            right: 24.5%;
        }
    }

    @media screen and (min-width: 1560px) {
        .tab ul.login{
            right: 1%;
        }
    }

@media screen and (min-width: 1760px) {
    .tab ul.login{
        right: 7%;
    }
}
    
asked by anonymous 30.06.2015 / 16:13

1 answer

2
___ erkimt ___ CSS Media Queries (several statements followed) ______ qstntxt ___

Hello, I want to know if it is possible to get a cleaner and more compact solution from the following CSS. 

<link href="style-min-default.css" type="text/css" rel="stylesheet" />
<link href="style-min-630.css" media="screen and (min-width: 630px)" type="text/css" rel="stylesheet" />
<link href="style-min-760.css" media="screen and (min-width: 760px)" type="text/css" rel="stylesheet" />
<link href="style-min-830.css" media="screen and (min-width: 830px)" type="text/css" rel="stylesheet" />
<link href="style-min-990.css" media="screen and (min-width: 990px)" type="text/css" rel="stylesheet" />
<link href="style-min-1030.css" media="screen and (min-width: 1030px)" type="text/css" rel="stylesheet" />
<link href="style-min-1160.css" media="screen and (min-width: 1160px)" type="text/css" rel="stylesheet" />
<link href="style-min-1200.css" media="screen and (min-width: 1200px)" type="text/css" rel="stylesheet" />
<link href="style-min-1300.css" media="screen and (min-width: 1300px)" type="text/css" rel="stylesheet" />
<link href="style-min-1400.css" media="screen and (min-width: 1400px)" type="text/css" rel="stylesheet" />
<link href="style-min-1560.css" media="screen and (min-width: 1560px)" type="text/css" rel="stylesheet" />
<link href="style-min-1760.css" media="screen and (min-width: 1760px)" type="text/css" rel="stylesheet" />
    
______ ___ azszpr71999

There is no standard rule, and this response may even be based on opinion. But you can separate into different files and use the rule of media in attribute media tag link : 

// style-min-630.css
.tab ul.login{
  right: 29%;
}

// style-min-760.css
.tab ul.login{
  right: 27%;
}

// style-min-830.css
.tab ul.login{
  right: 30%;
}

// style-min-990.css
.tab ul.login{
  right: 21%;
}

// style-min-1030.css
.tab ul.login{
  right: 24%;
}

// style-min-1160.css
.tab ul.login{
  right: 25%;
}

// style-min-1200.css
.tab ul.login{
  right: 19%;
}

// style-min-1300.css
.tab ul.login{
  right: 21%;
}

// style-min-1400.css
.tab ul.login{
  right: 24.5%;
}

// style-min-1560.css
.tab ul.login{
  right: 1%;
}

// style-min-1760.css
.tab ul.login{
  right: 7%;
}

Files: 

// style.min.less
@import url("style-min-630.less");
@import url("style-min-760.less");
@import url("style-min-830.less");
@import url("style-min-990.less");
@import url("style-min-1030.less");
@import url("style-min-1160.less");
@import url("style-min-1200.less");
@import url("style-min-1300.less");
@import url("style-min-1400.less");
@import url("style-min-1560.less");
@import url("style-min-1760.less");

Remember that this code is aimed performance for this purpose it is best to pack everything into one minified file .

With this structure, you have an organized development environment, but pro end user gets a little heavy, so a good solution to this would be to use a pre-processor to LESS using the plugin that allows merge multiple files and compresses them at the same time, having only one CSS file: 

lessc style.min.less > style.min.css --clean-css="--s1 --advanced --compatibility=ie8"

Process the file: (via the command line) 

<link href="style.min.css" type="text/css" rel="stylesheet" />

And use it in production 

<link href="style-min-default.css" type="text/css" rel="stylesheet" />
<link href="style-min-630.css" media="screen and (min-width: 630px)" type="text/css" rel="stylesheet" />
<link href="style-min-760.css" media="screen and (min-width: 760px)" type="text/css" rel="stylesheet" />
<link href="style-min-830.css" media="screen and (min-width: 830px)" type="text/css" rel="stylesheet" />
<link href="style-min-990.css" media="screen and (min-width: 990px)" type="text/css" rel="stylesheet" />
<link href="style-min-1030.css" media="screen and (min-width: 1030px)" type="text/css" rel="stylesheet" />
<link href="style-min-1160.css" media="screen and (min-width: 1160px)" type="text/css" rel="stylesheet" />
<link href="style-min-1200.css" media="screen and (min-width: 1200px)" type="text/css" rel="stylesheet" />
<link href="style-min-1300.css" media="screen and (min-width: 1300px)" type="text/css" rel="stylesheet" />
<link href="style-min-1400.css" media="screen and (min-width: 1400px)" type="text/css" rel="stylesheet" />
<link href="style-min-1560.css" media="screen and (min-width: 1560px)" type="text/css" rel="stylesheet" />
<link href="style-min-1760.css" media="screen and (min-width: 1760px)" type="text/css" rel="stylesheet" />
    
___
30.06.2015 / 16:25
Software Licenses Logic to inhibit registration permanently