How to optimize responsive web design and style css png icons? [closed]

Question

How to optimize responsive web design and style css png icons? [closed]

closed . This question needs to be more focused . He's not getting answers right now.

Want to improve this question? update question to focus on a problem only when edit this post .

Closed 4 years ago .

Responsive responsive web design having several resolutions the code would be too extensive. How to optimize CSS Style Code is there a better way to compress to avoid css styles too extensive.

@media screen and (max-width:800px){
#header {
 width: 800px;
}
#area {
 width:800px;
}

#footer{
 width: 800px;
}
}
@media screen and (max-width:600px) {
#header {
 width: 600px;
}
#area {
 width:600px;
}

#footer{
 width: 600px;
}
}
@media screen and (max-width:400px) {
#header {
 width: 400px;
}
#area {
 width:400px;
}

#footer{
 width: 400px;
}
}
@media screen and (max-width:320px) {
#header {
 width: 320px;
}
#area {
 width:320px;
}

#footer{
 width: 320px;
}
}

I mention extensive for having to adapt the template and apart Aptare the content.

On the other hand how can I style the PNG icons

I don't like to use extensive libraries to use icons I like optimized codes more but when calling icons from a PNG image

.icon-mail:before{
  content: url(../font/icons/icon-mail.png);
}

I can't change the width or height of the image or change the color, is there any way to give styles to png icons.

2

Author: Otto, 2016-08-03

Source

1 answers

score 2 · Accepted Answer

On the optimization of @media queries , you must remember that the styles defined in the root of the document will be used in a general way and the styles of the @media queries will be conditional on the specified restriction being met, "inheriting" the more general styles.

In the question you put this:

@media screen and (max-width:800px){
    //estilos
}
@media screen and (max-width:600px) {
    //estilos
}
@media screen and (max-width:400px) {
    //estilos
}
@media screen and (max-width:320px) {
    //estilos
}

But really that scheme would be something like this:

// estilos generales que se aplicarán para todos los tamaños de pantalla

@media screen and (max-width:800px){
    // sólo modificaciones a los estilos de arriba (general)
}
@media screen and (max-width:600px) {
    // sólo modificaciones a los estilos de arriba (general + 800)
}
@media screen and (max-width:400px) {
    // sólo modificaciones a los estilos de arriba (general + 800 + 600)
}
@media screen and (max-width:320px) {
    // sólo modificaciones a los estilos de arriba (general + 800 + 600 + 400)
}

This way you would not be repeating CSS rules (in some cases it will be impossible to avoid), only the general ones would be defined and then it would be counted on that they would cascade over all the resolutions, and similarly the different conditionals.

For example, if you have:

@media screen and (max-width:800px){
    #header {
        width: 800px;
        font-family:Arial,sans-serif;
        font-size:2em;
        color:red;
    }
}
@media screen and (max-width:600px) {
    #header {
        width: 600px;
        font-family:Arial,sans-serif;
        font-size:1.5em;
        color:red;
    }
}
@media screen and (max-width:400px) {
    #header {
        width: 400px;
        font-family:Arial,sans-serif;
        font-size:1.2em;
        color:red;
    }
}
@media screen and (max-width:320px) {
    #header {
        width: 320px;
        font-family:Arial,sans-serif;
        font-size:1em;
        color:red;
    }
}

That could be simplified like this:

@media screen and (max-width:800px){
    #header {
        width: 800px;
        font-family:Arial,sans-serif;
        font-size:2em;
        color:red;
    }
}
@media screen and (max-width:600px) {
    #header {
        width: 600px;
        font-size:1.5em;
    }
}
@media screen and (max-width:400px) {
    #header {
        width: 400px;
        font-size:1.2em;
    }
}
@media screen and (max-width:320px) {
    #header {
        width: 320px;
        font-size:1em;
    }
}

On how instead of adding the image on the content, you could leave the content empty and add the image as the background of the :before and that would give you more control over its size (using background-size:cover). So you could define different image sizes depending on different screen sizes.

For example:

div::before {
  content:"";
  display:inline-block;
  width:200px;
  height:200px;
  background-image:url(http://lorempixel.com/200/200/cats);
  background-size:cover;
}

<div></div>