RWD: media query worst practice

by Eddie Lin

HTML

<section id="color-1">
    <div class="container-1">
         Mozilla 專案為全球性社群，成員們信奉開放、創新及機會是網際網路健全發展的關鍵因素。我們自 1998 年起為確保網際網路的發展裨益全民而生，以創作 Mozilla Firefox 網頁瀏覽器聞名。
    </div>
</section>
<section id="color-2">
    <div class="container-2">
        Mozilla 專案以社群力量建立世界一流的開放源碼軟體，並開創各種新式的合作活動；成員們志同道合，為了提昇全民的網路體驗而努力。
    </div>
</section>
<section id="color-3">
    <div class="container-3">
        我們依據過往的努力整理出一系列理念的原則，涵蓋我們認為能同時對全民及商業活動有益的網際網路發展重要方針，在以下的 Mozilla 宣言中將闡述這些理念。 
    </div>
</section>

CSS

#color-1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 90px;
    background: #FFFF88;
}
#color-2 {
    position: absolute;
    width: 100%;
    top: 130px;
    height: 70px;
    background: #88FF88;
}
#color-3 {
    position: absolute;
    top: 240px;
    width: 100%;
    height: 90px;
    background: #FF8888;
}
section {
    padding: 20px 0;
}
.container-1 {
    display: block;
    margin: auto;
    padding: 20px;
    width: 500px;
    text-align: justify;
    background: rgba(255,255,255,0.5);
}
.container-2 {
    display: block;
    margin: auto;
    padding: 20px;
    width: 500px;
    text-align: justify;
    background: rgba(255,255,255,0.5);
}
.container-3 {
    display: block;
    margin: auto;
    padding: 20px;
    width: 500px;
    text-align: justify;
    background: rgba(255,255,255,0.5);
}

@media only screen and (max-width: 540px) {
    #color-1 {
        height: 110px;
    }
    #color-2 {
        top: 150px;
        height: 90px;
    }
    #color-3 {
        top: 280px;
    }
    .container-1 {
        width: 400px;
    }
    .container-2 {
        width: 400px;
    }
    .container-3 {
        width: 400px;
    }
}

@media only screen and (max-width: 440px) {
    #color-1 {
        height: 130px;
    }
    #color-2 {
        top: 170px;
        height: 110px;
    }
    #color-3 {
        top: 310px;
        height: 110px;
    }
    .container-1 {
        width: 300px;
    }
    .container-2 {
        width: 300px;
    }
    .container-3 {
        width: 300px;
    }
}