Responsive Media Query CSS Frage.

html.de-Forum HTML, XHTML & CSS
1

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

2

„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.

3

Setze deine margin und paddings mal neu :slight_smile: 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.