Le bootstrap est-il une mise en page réactive ?

En matière de mise en page réactive, le concept de bootstrap apparaîtra dans nos esprits. La mise en page Web réactive est un moyen de fournir aux utilisateurs de bons visuels sur des navigateurs de différentes tailles. Il s’agit actuellement d’une méthode de mise en page populaire.

La mise en page responsive est un concept proposé par Ethan Marcotte en mai 2010. Bref, un site web peut être compatible avec plusieurs terminaux - et plutôt que d'en faire une version spécifique pour chaque terminal. Ce concept est né pour résoudre la navigation Internet mobile. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

La mise en page réactive peut fournir aux utilisateurs de différents terminaux une interface plus confortable et une meilleure expérience utilisateur, et avec le développement actuel des appareils mobiles à grand écran. Vulgarisation Il n’est pas exagéré de parler de « tendance générale ». Alors que de plus en plus de designers adoptent cette technologie, nous constatons non seulement de nombreuses innovations, mais également des modèles bien établis.

Avantages :

Forte flexibilité face aux appareils avec différentes résolutions

Peut résoudre rapidement le problème de l'adaptation de l'affichage multi-appareils

Inconvénients :

Compatible avec divers appareils, charge de travail lourde, faible efficacité

Code encombrant, éléments inutiles cachés, temps de chargement plus long

En fait, il s'agit d'une solution de conception de compromis, qui est affectée par de nombreux facteurs et ne peut pas obtenir les meilleurs résultats

Elle modifie dans une certaine mesure la structure de mise en page originale du site Web, ce qui peut provoquer une confusion chez l'utilisateur

Nous avons appris ci-dessus ce qu'est une mise en page réactive, alors comment devrions-nous la concevoir dans nos projets réels ?

Dans le passé, lorsque nous concevions des sites Web, nous étions troublés par la compatibilité des différents navigateurs et appareils de différentes tailles. Comment devrions-nous nous calmer ?

S'il y a une demande, il y aura une solution. En matière de mise en page réactive, il faut mentionner Media Query en CSS3. C'est une bonne chose, facile à utiliser, puissante et rapide. ... …Media Query est un outil puissant pour créer des mises en page réactives. Grâce à cet outil, nous pouvons créer une variété d'interfaces riches et pratiques de manière très pratique et rapide.

Qu'est-ce que Media Query en CSS3 ?

Définissez les règles de feuille de style selon différents types et conditions de médias.

Les requêtes multimédias permettent à CSS d'agir avec plus de précision sur différents types de médias et différentes conditions sur le même média.

La plupart des fonctionnalités multimédias des requêtes multimédias acceptent min et max pour exprimer « supérieur ou égal à » et « inférieur ou égal à ».

Par exemple : la largeur aura une largeur minimale et une largeur maximale. Les requêtes multimédias peuvent être utilisées sur les règles @media et @import en CSS, et peuvent également être utilisées en HTML et XML.

Grâce à cet attribut de balise, nous pouvons facilement implémenter des interfaces riches sur différents appareils, notamment les appareils mobiles, qui seront plus largement utilisés.

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap 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!