CSS Media Queries (several statements followed)

Question

Hello, I want to know if it is possible to get a cleaner and more compact solution of 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%;
    }
}

Answer 1

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

<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" />

Archives:

// 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%;
}

Remembering that this code is not aimed at performance, for that purpose best is to compress everything into a single minified file.

With this structure, you have an organized development environment, but for the end user it gets a little heavy, so a good solution for this would be to use a Pre-processor as LESS using the plugin clean-css which makes it possible to merge multiple files and compress them at the same time, thus having only one CSS file:

// 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");

Process the file: (via command line)

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

And use it in production

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