Qu'est-ce qu'une mise en page réactive ?
La mise en page réactive signifie que la même page a des mises en page différentes sur différentes tailles d'écran. Aujourd’hui, alors que l’Internet mobile est très développé, les pages Web que nous développons sur les navigateurs de bureau ne peuvent plus répondre aux besoins de visualisation sur les appareils mobiles. La méthode de développement traditionnelle consiste à développer un ensemble de pages côté PC et un autre ensemble de pages côté mobile. Mais cela est très gênant. Avec des terminaux de plus en plus différents, vous devez développer plusieurs versions différentes de la page. Pour utiliser une mise en page réactive, il vous suffit de développer un seul ensemble. EthanMarcotte a proposé le concept de mise en page responsive en mai 2010. Bref, un site web peut être compatible avec plusieurs terminaux.
La différence entre le développement réactif et le développement séparé pour mobile et PC : le développement réactif écrit uniquement un ensemble d'interfaces et affiche différentes mises en page et contenus en détectant la résolution de la fenêtre d'affichage et en effectuant le traitement du code sur le client pour différents clients. Le terminal mobile et le terminal PC sont développés séparément. En détectant la résolution de la fenêtre d'affichage, il peut déterminer si l'appareil actuellement accédé est un PC, une tablette ou un téléphone mobile, interrogeant ainsi le serveur et renvoyant différentes pages.
Quel est le principe du développement réactif ?
Le principe du développement réactif consiste à utiliser Media Query dans CSS3 pour définir différentes mises en page et styles pour les appareils de différentes largeurs afin de s'adapter aux différents appareils.
Définition et utilisation des requêtes SS3 @media :
À l'aide de la requête @media, vous pouvez définir différents styles pour différents types de médias. @media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page réactive, @media est très utile. Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.
Par exemple, si la largeur de l'écran est inférieure à 500 pixels, changez la couleur d'arrière-plan en rouge.
Pour implémenter une mise en page réactive, les méthodes couramment utilisées sont les suivantes :
(1) Utiliser les media queries en CSS (le plus simple) ;
(2) Utiliser JavaScript (le coût d'utilisation est relativement élevé) ;
(3) Utilisez des frameworks open source tiers (tels que bootstrap, qui peuvent prendre en charge divers navigateurs).
Définir une balise méta
Tout d'abord, nous devons définir la balise méta pour indiquer au navigateur de rendre la largeur de la fenêtre (la zone visible de la page Web) égale à la largeur de l'appareil et d'interdire à l'utilisateur de zoomer sur la page, comme montré ci-dessous:
<metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no>
Lors de la configuration de la fenêtre, vous devez faire attention. La fenêtre est la taille de la zone visible de la page Web. Lors de la configuration de la fenêtre, définissez simplement la largeur. Vous n'avez pas besoin de vous soucier de la hauteur. la hauteur est automatiquement augmentée par le contenu de la page Web. La signification du contenu de la balise méta ci-dessus est la suivante :
● viewport : Viewport, qui représente la zone visible de la page Web ;
●width : contrôle la taille de la fenêtre d'affichage. Vous pouvez spécifier une valeur spécifique, telle que 600, ou une valeur spéciale composée de mots-clés. Par exemple, device-width représente la largeur du périphérique ;
●échelle initiale : indique le taux de mise à l'échelle initial, qui est le taux de mise à l'échelle lors du premier chargement de la page ;
●échelle maximale : indique le rapport maximum auquel l'utilisateur est autorisé à zoomer, allant de 0 à 10,0 ;
●échelle minimale : indique que les utilisateurs sont autorisés à zoomer sur l'échelle minimale, comprise entre 0 et 10,0 ;
● évolutif par l'utilisateur : indique si l'utilisateur peut zoomer manuellement, "oui" signifie que la mise à l'échelle est autorisée, "non" signifie que la mise à l'échelle est interdite.
demandes des médias
Les requêtes multimédias CSS peuvent définir différents styles CSS pour différents types de médias (impression d'écran) en fonction de conditions spécifiées, afin que les utilisateurs utilisant différents appareils puissent bénéficier de la meilleure expérience.
Utilisez HTML comme exemple :
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>Tutoriel d'introduction à la page responsive : Albert Yang</title><linkrel =stylesheethref=style.css><linkrel=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQV nN crossorigin=anonyme>< / head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>Page d'accueil</a></li><li><ahref=#>Blog</ a ></li><li><ahref=#>Contactez-moi</a></li><li><ahref=#>Tableau de messages</a></li><li><ahref=#> À propos de moi</a></li><li><ahref=#>Mur de photos</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden = true></i></div></header><div><div><h2>Mise en page réactive</h2><p>La mise en page réactive signifie que la même page a différentes mises en page dans différentes tailles d'écran. La méthode de développement traditionnelle consiste à développer un ensemble pour le PC et un autre pour le téléphone mobile. Cependant, lorsque vous utilisez une mise en page réactive, vous n'avez besoin de développer qu'un seul ensemble. La différence entre la conception réactive et la conception adaptative : la conception réactive développe un ensemble d'interfaces et affiche différentes mises en page et contenus en détectant la résolution de la fenêtre d'affichage et en effectuant le traitement du code côté client pour différents clients. La conception adaptative nécessite le développement de plusieurs ensembles d'interfaces ; , en détectant la résolution de la fenêtre d'affichage, il est déterminé si le dispositif actuellement accédé est un PC, une tablette ou un téléphone mobile, demandant ainsi la couche de service et renvoyant différentes pages. Les requêtes multimédias CSS3 nous permettent de définir différents styles pour différents types de médias. Lorsque la taille de la fenêtre du navigateur est réinitialisée, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur. </p><ahref=#>Lire le texte intégral</a></div><imgsrc=img.png></div></body></html>
Résultats en cours d'exécution :
Ce qui suit est un exemple complet pour démontrer la mise en œuvre d’une mise en page réactive :
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Mise en page réactive</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, utilisateur -scalable=no/><style>*{margin:0px;padding:0px;font-family:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width : 85 % ;*/background-color:goldenrod;text-align:center;font-size:48px;line-height:100px;margin:0auto;}#headdiv{display:none;font-size:20px;height:30px ;width :100px;background-color:green;float:right;line-height:30px;margin-top:35px;}#headul{width:80%;}#headulli{width:20%;float:left;text -align :center;list-style:none;font-size:20px;}#main{height:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height :600px ;float:left;width:20%;background-color:red}.center{width:60%;border-left:10pxsolid#FFF;border-right:10pxsolid#FFF;box-sizing:border-box }@ mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){.right{display:none;}.left{width : 30 % ;}.center{width:70%;border-right:hidden;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height: 200px; hauteur de ligne:200px;}.center{border:hidden;border-top:10pxsolid#FFFFFF;border-bottom:10pxsolid#FFFFFF;height:600px;line-height:600px;}#headul{display:none }#; headdiv{display:block;}}</style></head><body><div><headerid=head><ul><li>en-tête1</li><li>en-tête2</li><li >en-tête2 </li><li>en-tête2</li><li>en-tête2</li></ul><div>icône</div></header><sectionid=main><divclass=left>gauche< /div ><divclass=center>centre</div><divclass=right>droite</div></section><footerid=foot>pied de page</footer></div></body></html>Résultats en cours d'exécution :
