le CSS

Exemple de CSS multi écrans

On défini le format pour les petits écrans en premier puis a chaque taille d'écran intermédiaire on ajuste la mise en page. D'un empilement de boites on passe à deux colonnes col1 et ciol2 puis à 3 en ajoutant col 3 les colonnes 1 et 3 on des largeurs fixe et 2 en % plafonné à max-width 
<style type="text/css">
* {box-sizing:border-box; }
img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video {  max-width: 100%;}
form { margin: 0 }
p, div { }

a {color:black; background-color:#60b170}
.amd {background-color:navy}
.amp {background-color:#808080}
.selx11 {color:navy;background-color:#cda1a1}

body {font-family: cambria, Arial, serif;  text-align:justify; font-size:90%;margin: 0;color: #000000; background-color:#fcfcf4;}
.color_page {color:#000000; background-color:#fcfcf4;}

h1 {font-size:140%; font-weight:650; color:navy; text-align:center; margin: 3% 0 4% 0;}
h2 {font-size:130%; font-weight:650; color:navy; text-align:center; margin: 2% 0 3% 0;}
h3 {font-size:120%; font-weight:650; color:navy; text-align:center; margin: 2% 0 2% 0;}
h4 {font-size:110%; font-weight:650; color:navy; text-align:left; margin: .5% 0 .5% 0}
h5 {font-size:100%; font-weight:650; color:navy; text-align:left; margin : 0 }
h6 {text-align:center}
h8 {font-size:106%; font-weight:700; color:navy; text-align:left; width:100%;margin: 0;background-color:#dadada;}


.vu_mo {display:'' }
.vu_pc {display:none }
.v_pc  {display:none }
.vu_big {display: none }
.vid_o {width:384px; height:216px }
.page {width:100%; max-width:1100px; text-align: justify; font-size: 100%; font-weight: 650; margin:0; padding:0.3% ;
   background-color: #fefaf1;  border: 1px solid green; float:center;}
.color_page {background-color: #f9f2f3; }
.t1 {color:white;  background-color: navy; width:calc(100%-140px); margin-left:130px; font-size:100%;  margin-top:-10px; float:center; text-align:center;
border: 4px solid red;}
.at1 {color:white;  background-color: navy; }
.bt  {font-size:100%; width:40%; margin:1px; text-align: left; font-weight: 650; color:#ffffff;
        background-color: #362018; border :1px solid red;}

overflow: hidden;
.col1  {display: none ;text-align:justify; width:100%;overflow: hidden;float:left; word-wrap: break-word; border: 1px solid  black}
.col1m {display:block;text-align:justify; width:100%;float:left; border: solid 1px black}
.col1c {display:block;text-align:justify; width:100%;float:left; border: solid 1px black}
.col2      {text-align:justify; color:black; display:block;width:98%;float:left;  margin-left:0.4%;padding-left:0.4%; border: 1px solid  black }
.col2 a      {color:black; background-color:#deffc6;}
.col2plus1 {text-align:justify; color:black; display:block;width:98%;float:center;margin-left:0.4%;padding-left:0.4%; border: 1px solid  black }
.col2plus1 a {color:black; background-color:#deffc6;}
.col2b {display:block;text-align:justify; width:100%;float:left; border: solid 1px red}
.col2c {display:block;text-align:justify; width:100%;float:left; border: solid 1px black}
.col3  {display: none ;text-align:justify; float:left;width:160px; margin-left:0.4%;}
.col3b {display: none ;text-align:justify; float:right;width:160px; margin-left:0.5%; background-color:#e0d0d0;border: solid 1px; }
.col150 {display:block;text-align:justify; width:100%;float:left; color:with; background-color : #2a1038; }
.col220 {display:block;text-align:justify; width:100%;float:left; text-align:center; border: solid 1px black}
.img880 {display:block;width:99%%; text-align:center; border: solid 1px black}
.sep {clear: both}

.box50 {display:block; float:center; text-align:justify; width:99%;paddin:0.4%}

.menu_h {text-align:left;font-size:110%; color:#fff;background-color:navy; text-decoration:none; width:100% }
.menu_v {width:160px; position:relative; top:1px}
.menu_v1 {color:#fff;background-color:navy}

.menu_hd {width:100%;text-align:center;color:white;background-color:navy0; }
.menu_hd a {text-decoration:none}
.menu_hd a:hover, .menu_hd a:focus, .menu_hd a:active {background-color:#404099}

.menu_vp {width:100%;text-align:center;color:#010101;background-color:#D8FF60; }
.menu_vp a {text-decoration:none}
.menu_vp a:hover, .menu_vp a:focus, .menu_vp a:active {background-color:#FF6464}

.menu_vps {width:160px;border:0px solid #000000;color:#000099;background-color:#FF6464;padding: 0 0 0 3px ; margin: 0 0 0px 0}
.menu_vps a {color:#000000;text-decoration:none}
.menu_vps a:hover, .menu_vps a:focus, .menu_vps a:active {background-color:#603232}

.selx {background-color:#FF6464}

.RJ {font-size:110%;font-style:italic;color:navy;}

.photo_qcr {float:left;text-align:center;width:60px; background-color:#f0fff0}
.contedit {border:1px solid #808080;height:430px; width:100%;max-width:680px; overflow:auto}
.btsujet   {border:outset 3px; border-radius:6px;text-align:left;font-size:95%;font-weight:700;width:180px;margin-bottom:0.05em;background-color: #efecf6 }
.btdomaine {border:border-radius:7px;text-align:left;font-size:130%;font-weight:600;wihttp://bella.c-net.fr/accueil/Bandeau-Bella-2.jpgdth:160px;margin-bottom:0.2em;background-color: #ccddcc }

a {color:black; background-color:#ecFFFc}

@media screen  and (min-width : 482px)  {
 .vid_o {width:480px; height:270px }
}

@media screen  and (min-width : 680px)  {
  .vu_pc {display:''}
  .v_pc  {display:''}
  .vu_mo {display: none}
  .col220 {width:calc(100% - 224px) }
  .img880 {width:calc(70%-224px); max-with:600px; max-height:220px }
  .col1  { width:160px;float:left;}
  .col1m {display:'none';}
  .col2  { width:calc(98% - 170px)}
  .bt    { font-size:100%; width:168px;}
  .btselect {font-size:100%;width:180px}
  .btdomaine {font-size:100%;width:160px}
  .menu_h {font-size:105%}
  .contedit {width:calc(100% - 68px)}
  .menu_vp {width:160px;float:left; text-align:left}
  .vid_o {width:640px; height:360px }
}

@media screen and (min-width : 740px)  {
  .vu_big {display:block}
  .btsujet {font-size:90%;width:160px}
  .page {max-width:1100px; min-width:600px; font-size: 90%; }
  .t1 {width:calc:100%-140px; font-size:100%; margin-top:-10px; float:center; text-align:center;
      background-color: #fffaf1; border: 2px solid navy;}
  .vid_o {width:720px; height:405px }
  .box50 {display:block;%;float:left;width:49%}
}

@media screen and (min-width : 940px)  {
  .col2  {width:calc(98% - 324px)}
  .col2plus1 {width:calc(98% - 162px);float:left;}
  .col3  {display:block;width:160px;}
  .vid_o {width:768px; height:432px }
  .col2b {width:calc(100% - 180px)}
}

@media screen and (min-width : 1100px)  {
  .vid_o {width:832px; height:468px }
}

@media  screen and (min-width : 1240px) {
   h1 {font-size:200%; font-weight:700; margin:10px 0 15px 0;}
   h2 {fon-size:160%; font-weight:700; color:navy; text-align:center; margin:5px 0 10px 0;}
   h3 {font-size:140%; font-weight:700; color:navy; text-align:center; margin:0}
   h4 {font-size:100%; font-weight:600; color:navy; text-align:left; margin:0; background-color:#dadada;}
   h5 {font-size:105%; font-weight:700; text-align:left; margin : 0 }
   h6 {text-align:center}
  .col2 {width:calc(100% - 380px)}
  .col2b {margin-left:0.1%; width:calc(98% - 220px)}
  .col3 { width:160px; }
}

</style>