Comment affecter une valeur a une variable suivant la taille

  <style>
    #web {display: block;}
    #mobile {display: none;}

    @media screen and (max-width: 320px) {
        #web {display: none;}
        #mobile {display: block;}
    }
</style>

<div id="mobile">
    <?php $variable=3; echo $variable; ?>
</div>

<div id="web">
     <?php $variable=8; echo $variable; ?>
</div>

  <?php
                     //ici commence le RSS de wordpress
                      if($flux = simplexml_load_file('http://pecheperle.be/category/nouveautes/feed/')) {
                         $donnee = $flux->channel;

                         // Initialiser le compteur.
                         $compteur = 0;

                         // Affiche les 3 derniers articles.
                         $limite = 3;

//on affiche le titre
                        echo '<h3 style ="font-size: 1.25rem;font-weight: Bold;text-align: center;background-color:#ffff;">Dernières sorties de pêche</h3>';

                        //on initialise la boucle 
                        foreach($donnee->item as $valeur) {
                         ?>

                  <!-- on affiche le titre de l article de wordpress --> 
                  <div class="row" style ="background-color:#ffff;margin-left: 0; margin-right: 0;">
                     <div class="col-xl-12 col-lg-12 col-md-12">
                        <h4 style ="font-size: 1.25rem;text-align: center;"> 
                           <a style ="color: #000;" target="_blank" href="<?php echo $valeur->link; ?>"><?php echo $valeur->title;?></a>
                        </h4>
                     </div>
                  </div>

                  <!-- on affiche l image de l article et le lien vers la page wordpress --> 
                  <div class="row" style="margin-bottom: 20px;background-color:#ffff;margin-left: 0; margin-right: 0;">
                     <div class="col-xl-12 col-lg-12 col-md-12">
                        <a target="_blank" href="<?php echo $valeur->link; ?>">
                        <img alt="nouveautées de la pêche à la perle" src="<?php echo $valeur->post_thumbnail->url ;?> " style="display: block; margin-left: auto; margin-right: auto ;margin-bottom: 20px;"/>
                        </a>

                        <!-- EN TEST lorsque cela fonctionne j abandonne celui du haut ---on affiche un bouton suite dans lequel sera exécuté un code javascript afin que l utilisateur confirme son choix  --> 
                        <a class="button centre" target="_blank" style="width: 100px;margin-bottom:10px;"  onclick="confirmation11(event,'<?php echo $valeur->link; ?>')">Suite</a>
                     </div>
                  </div>
                  <?php    

                     // Le compteur incrémente +1 à chaque affichage.
                     $compteur++;

                     // Arrête d'afficher les articles quand la valeur limite est atteinte.
                     if ($compteur == $limite)
                     break;
                     }
                     } else {
                     echo 'Le flux RSS du site pecheperle.be n\'a pas pu être chargé.';
                     }
                     ?>