• Responsive 6

     

     

     

    Selon la résolution de votre écran, vous verrez soit le premier cadre en rouge (300px à 900px); soit le second en jaune (1000px à 1100px); soit le troisième en vert fluo (1110px à 1400px);
    ...
    <div id="art">
    <div id="mont">
    <p id="a1" class="resp">&nbsp;</p>
    <p id="a2" class="resp">&nbsp;</p>
    <p id="a3" class="resp">&nbsp;</p>
    </div>
    </div>

    <style type="text/css"><!--
    #mont{float:left; width:20%; height:auto; background:url('http://ekladata.com/AHhv6xStUIreQonx5ATb-mDlvh0/00018.jpg '); border:3px double grey;}
    .resp{border:3px double grey; margin:30px; width:50%; height:auto; box-shadow:3px 3px 6px black;}
    #comm{float:left; margin:0 0 0 40px; width:60%; height:auto; padding:10px;background:url('http://ekladata.com/_MnFZ-Gzlevc1PIta7kt4j5PEoY/00044.jpg'); border:3px double brown;}
    @media (min-device-width: 300px) and (max-device-width: 900px){#a1 {background-color:red;}}

    @media (min-device-width: 1000px) and (max-device-width: 1100px){#a2 {background-color:yellow;}}

    @media (min-device-width: 1110px) and (max-device-width: 1400px){#a3 {background-color:lime;}}
    --></style>