Introduction de l'article de wulin.com (www.vevb.com): conception Web réactive.
Avec la popularité de la 3G, de plus en plus de gens utilisent leurs téléphones portables pour surfer sur Internet.
Les appareils mobiles dépassent les appareils de bureau et deviennent le terminal le plus courant pour accéder à Internet. Ainsi, les concepteurs de sites Web doivent faire face à un problème difficile: comment peuvent-ils présenter la même page Web sur des appareils de différentes tailles?
L'écran d'un téléphone mobile est relativement petit, généralement en dessous de 600 pixels; La largeur d'écran d'un PC est généralement supérieure à 1 000 pixels (actuellement la largeur traditionnelle est de 1 366 × 768), et certains atteignent même 2 000 pixels. Il n'est pas facile d'avoir des résultats satisfaisants sur les écrans de différentes tailles.
La solution à de nombreux sites Web est de fournir différentes pages Web pour différents appareils, tels que la fourniture d'une version mobile ou de la version iPhone / iPad. Cela garantit l'effet, mais il est assez gênant. Il nécessite la maintenance de plusieurs versions. De plus, si un site Web dispose de plusieurs portails, il augmentera considérablement la complexité de la conception d'architecture.
Par conséquent, certaines personnes ont longtemps imaginé si elles peuvent être conçues à un moment donné et généralement applicables à la même page Web s'adapte automatiquement aux écrans de différentes tailles, et ajuste automatiquement la mise en page en fonction de la largeur de l'écran?
1. Le concept de conception Web adaptative
En 2010, Ethan Marcotte a proposé le terme conception Web réactive, qui fait référence à une conception Web qui peut automatiquement reconnaître la largeur de l'écran et effectuer des ajustements correspondants.
Il a fait un exemple des portraits des six protagonistes des aventures de Sherlock Holmes. Si la largeur de l'écran est supérieure à 1300 pixels, 6 images sont dans une rangée côte à côte.
Si la largeur de l'écran se situe entre 600 pixels et 1300 pixels, les 6 images sont divisées en deux lignes.
Si la largeur de l'écran se situe entre 400 pixels et 600 pixels, la barre de navigation se déplace vers la tête de la page.
Si la largeur de l'écran est inférieure à 400 pixels, 6 images sont divisées en trois lignes.
Les médias ont plus d'exemples comme celui-ci ci-dessus.
Il existe également un widget de test ici, qui peut afficher les effets de test des écrans avec différentes résolutions sur une page Web en même temps. Je recommande de l'installer.