Responsive Media Query CSS Frage.

[hakura]

Hi,

Ich wollte mal fragen ob es schlimm ist wenn man z.b.

die Normale CSS Version so hat:

.banner{
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background-image: url(../images/Coop/img_banner_coop_01.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
height: 401px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 59px;
}

Und z.b. auf der Media Query genau fast das gleiche:

@media screen and (min-width : 320px) and (max-width : 768px) {
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background: url(../images/Coop/img_banner_coop_iphone.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
height: 210px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 59px;
}

oder sollte man wenn möglich nur das für die media query ändern, was auch was nützt wie z.b. so;

@media screen and (min-width : 320px) and (max-width : 768px) {
.banner{
background: url(../images/Coop/img_banner_coop_iphone.jpg);
height: 210px;
}

???? danke für die Antworten

 

[Banana_Jones]

"Schlimm" ist es nicht, es leidet höchstens die Dateigröße und die Wartbarkeit. Der bessere Stil ist sicher, nur die sich ändernden Eigenschaften aufzulisten.

 

[konzule]

Setze deine margin und paddings mal neu :) so siehts doch gleich viel besser aus.

@media screen and (min-width : 320px) and (max-width : 768px) {
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background: url(../images/Coop/img_banner_coop_iphone.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
height: 210px;
margin: 0px  0px  0px  0px;
padding:59px  0px 0px 0px;
}

Und zu den mediaquesry. Im regelfall brauchst du nicht veränderte werte nicht nochmal schreiben sondern nur die die sich verändert haben.