Qu'est-ce qu'une mise en page réactive ? Introduction à la mise en page réactive

Qu'est-ce que la mise en page réactive ? De nos jours, la mise en page réactive est de plus en plus populaire, mais de nombreux amis ne savent toujours pas ce qu'est la mise en page réactive. L'article suivant vous présentera donc ce qu'est la mise en page réactive. Les amis intéressés peuvent y jeter un œil.

Jetons d’abord un coup d’oeilQu’est-ce que la mise en page réactive ?

Selon l'Encyclopédie Baidu, on peut le savoir : La mise en page adaptative est un concept proposé par Ethan Marcotte en mai 2010. Bref, c'est un site web qui peut être compatible avec plusieurs terminaux - pas pour chaque terminal fait une version spécifique. Ce concept est né pour résoudre la navigation Internet mobile.

En termes simples, la mise en page réactive consiste à rendre un site Web compatible avec plusieurs terminaux en même temps, transformant un site Web en plusieurs sites Web, ce qui nous permet d'économiser considérablement des ressources.

Il existe quatre niveaux d'interface réactive :

1. La même page doit être confortable dans différentes tailles et proportions

2. paraître raisonnable dans différentes résolutions ;

4. L'expérience de la même page sous différentes méthodes de fonctionnement (telles que la souris et l'écran tactile) doit être unifiée

5, la même page sur différents types ; des appareils (téléphones mobiles, tablettes, ordinateurs), la méthode d'interaction doit être cohérente avec les habitudes.

Après avoir connu ce qu'est la mise en page réactive, parlons brièvement decomment utiliser la mise en page réactive

1. définition des balises méta

Lors de la création d'un site Web réactif, ou lorsqu'un site Web non réactif devient réactif, vous devez d'abord faire attention à la disposition des éléments. Par exemple, sur les appareils mobiles, nous devons interdire à l'utilisateur de zoomer ; l'écran. Si cela n’est pas interdit, cela peut entraîner un désalignement de l’affichage et l’affichage peut ne pas correspondre au style du site Web mobile. Par conséquent, nous devons utiliser du code pour interdire aux utilisateurs de zoomer sur l'écran du téléphone mobile afin d'obtenir l'effet normal d'un site Web mobile.

2. Définir les styles via media query media query

media query est au cœur du design réactif. Il peut communiquer avec le navigateur et indiquer au navigateur comment afficher la page s'il s'agit d'un terminal. la résolution est inférieure à 980 px, vous pouvez l'écrire comme ceci. La mise en page à ce moment écrasera la mise en page précédemment définie.

3. Définir plusieurs largeurs d'affichage

4. Images réactives

L'utilisation de la mise en page réactive sera brièvement présentée ici Pour une compréhension approfondie, vous pouvez faire attention aux colonnes pertinentes du site Web php chinois pour apprendre ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!