Comment implémenter une mise en page réactive

1. Responsive layout : En bref, un site web peut être compatible avec plusieurs terminaux - plutôt que de faire une version spécifique pour chaque terminal. Ce concept est né pour résoudre la navigation Internet mobile.

2. Trois façons de mettre en œuvre une mise en page réactive

1. Requête CSS3-Media (La manière la plus simple, mais impossible à répondre de nombreux besoins)

2. Utiliser Javascript natif (coût élevé, déconseillé)

3. Frameworks open source tiers (tels que bootstrap, qui peuvent bien prendre en charge la mise en page réactive du navigateur)

3, attributs communs CSS3-Media Query

largeur de l'appareil, hauteur de l'appareil Largeur et hauteur de l'écran

largeur, hauteur Largeur et hauteur de la fenêtre de rendu

Orientation Orientation de l'appareil

Résolution Résolution de l'appareil

4, syntaxe de base de CSS3-Media Query

Syntaxe des styles CSS externes et inline

Exemple : feuille de style externe link.css (le fond est rouge lorsque la largeur de l'écran est inférieure ou égale à 480px)

                                                                                                                             who's who who's who who' who's La syntaxe de link.css n'a qu'une seule phrase : body{background: red;}

5, Bootstrap

Pour utiliser bootstrap, vous devez importer des fichiers css et js, un total de trois , et l'ordre ne peut pas être inversé (les versions peuvent être modifiées), comme indiqué ci-dessous

            <script src="js/jquery.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/bootstrap.min.js"></script>

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!