flex( Boîte élastique 、 Boîte télescopique )
1. Récipient élastique :
Pour utiliser une boîte élastique , Vous devez d'abord définir un élément comme un conteneur élastique
Nous passons display Pour régler le conteneur élastique
display:flex Set toNiveau du bloc Récipient élastique
display:inline-flex Set toEn ligne Un récipient élastique pour
2. Élément élastique
L'élément enfant du récipient élastique est l'élément élastique ( Terme élastique )
L'élément élastique peut être à la fois un récipient élastique
Valeurs facultatives:
row
Par défaut, Les éléments élastiques sont disposés horizontalement dans le récipient ( Gauche à droite ) - Broche De gauche à droite
row-reverse
Les éléments élastiques sont disposés horizontalement en sens inverse dans le récipient ( Droite à gauche ) - Broche De droite à gauche
column
Disposition longitudinale des éléments élastiques ( De haut en bas )
column-reverse
Disposition longitudinale des éléments élastiques ( De bas en haut )
Broche: La direction dans laquelle les éléments élastiques sont disposés est appelée la broche .
Axe latéral: La direction perpendiculaire à l'axe principal est appelée axe latéral .
flex-grow Indique le facteur d'étirement de l'élément élastique :
flex-shrink Spécifiez le coefficient de retrait de l'élément élastique :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 500px; border: 10px red solid; /* Oui.ul Set to Elastic Container */ display: flex; flex-direction: row; } li{ width: 200px; height: 100px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; } li:nth-child(1){ flex-grow: 0; flex-shrink: 1; } li:nth-child(2){ background-color: pink; /* flex-grow: 2; */ flex-shrink: 2; } li:nth-child(3){ background-color: orange; /* flex-grow: 3; */ flex-shrink: 3; } </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Copier le Code
Avant la contraction
Après contraction
Définit si l'élément élastique s'enroule automatiquement dans un conteneur élastique ;(Largeur du conteneur> Largeur de l'élément )
Valeurs facultatives:
Comment? Répartition de l'espace blanc sur la broche ( Comment les éléments de la broche sont disposés )
Valeurs facultatives:
<style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 800px; border: 10px red solid; /* Paramètresul Pour les récipients élastiques */ display: flex; justify-content: center; } li{ width: 200px; height: 100px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; flex-shrink: 0; } /* li:nth-child(1){ } */ li:nth-child(2){ background-color: pink; } li:nth-child(3){ background-color: orange; } </style>
Copier le Code
Définir l'alignement des éléments sur l'axe secondaire ;
Définir les relations entre les éléments
Valeurs facultatives:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 600px; height: 800px; border: 10px red solid; /* Paramètresul Pour les récipients élastiques */ display: flex; /* flex-direction: column; */ /* flex-wrap: wrap-reverse; */ /* flex-flow: wrap Et direction Propriétés abrégées de */ flex-flow: row wrap; /* justify-content: center; */ /*align-items: flex-end;*/ align-items: center; /*align-items: baseline;*/ /* align-content: Répartition de l'espace blanc de l'axe secondaire */ /*align-content: space-between;*/ } li{ width: 200px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; flex-shrink: 0; } li:nth-child(1){ /* align-self: Utilisé pour couvrir l'élément élastique actuel align-items */ align-self: stretch; } li:nth-child(2){ background-color: pink; } li:nth-child(3){ background-color: orange; } li:nth-child(4){ background-color: yellow; } li:nth-child(5){ background-color: chocolate; } </style>
</head>
<body>
<ul>
<li>1</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>4</li>
<li>
5
<div>5</div>
</li>
</ul>
</body>
</html>
Copier le Code
flex-grow: Coefficient de croissance de l'élasticité ;
/* flex-grow: 1; */
flex-shrink Facteur de réduction de l'élément élastique ;
flex-shrink: 1;
flex-basis Indique la longueur de base de l'élément sur la broche
Si la broche est Horizontal Et Cette valeur indique la largeur de l'élément ;
Si la broche est LongitudinalEt Cette valeur indique la hauteur de l'élément ;
flex Vous pouvez définir les trois styles de l'élément élastique :
flex Croissance Réduction Base;
initial Correspondant à "flex: 0 1 auto";
auto Correspondant à "flex: 1 1 auto";
none Correspondant à "flex: 0 0 auto" L'élément élastique n'est pas élastique .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 900px; border: 10px red solid; /* Réglage de la boîte élastique */ display: flex; } li{ width: 200px; height: 100px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; /* flex-grow: 1; */ /* flex-shrink: 1; */ /* flex-basis: auto; */ /* flex Vous pouvez définir les trois styles de l'élément élastique flex Croissance Réduction Base; initial "flex: 0 1 auto". auto "flex: 1 1 auto" none "flex: 0 0 auto" L'élément élastique n'est pas élastique */ flex: initial; } li:nth-child(1){ /* order Déterminer l'ordre dans lequel les éléments élastiques sont disposés */ order: 2; } li:nth-child(2){ background-color: pink; /* flex-grow: 2; */ order: 3; } li:nth-child(3){ background-color: orange; /* flex-grow: 3; */ order: 1; } </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Copier le Code
Dans le développement de pages mobiles , Les dimensions des écrans varient considérablement d'un appareil à l'autre , Il faut donc tenir compte de Pixels Et Viewport.
L'écran est composé d'un pixel ;
Il faut faire une distinction claire CSS La différence entre un pixel et un pixel physique .
CSS Les pixels sont les dimensions du dessin ou modèle ; Les pixels physiques sont les pixels physiques de l'écran .
Lorsque le Navigateur affiche une page web ,Il fautCSS Les pixels sont convertis en pixels physiques puis rendus .
Uncss Les pixels sont finalement affichés par plusieurs pixels physiques , À la discrétion du navigateur : Par défaut à pcFin,UncssPixels = Un pixel physique
Un viewport est la zone de l'écran utilisée pour afficher une page web ;
Vous pouvez voir la taille du viewport ,Pour observerCSS Rapport des pixels aux pixels physiques ;
Par défaut: Largeur du viewport 1920px(CSSPixels) 1920px(Pixels physiques)
Zoomez deux fois sur la situation : Largeur du viewport 960px(CSSPixels) 1920px(Pixels physiques)
On peut changer la taille du viewport ,Pour changerCSS Rapport des pixels aux pixels physiques .
Sur différents écrans d'affichage , La taille des pixels unitaires est différente , Plus les pixels sont petits, plus l'écran est clair .
24Pouces 1920x1080
iphone6 4.7Pouces 750 x 1334
Pixels de Smartphone Beaucoup plus petit que Pixels de l'ordinateur .
Par défaut, Les pages Web de l'extrémité mobile auront tous les affichages définis à 980Pixels(cssPixels)
Pour s'assurer quepc La page Web de bout en bout est normalement accessible à partir de l'extrémité mobile , Mais si la largeur de la page dépasse 980, Le navigateur de l'extrémité mobile Zoome automatiquement la page pour afficher la page entière .
Donc la plupart pc Tous les sites Web de bout en bout peuvent être navigués normalement dans le terminal mobile , Mais souvent, il n'y a pas de bonne expérience .
Pour résoudre ce problème, La plupart des sites Web sont spécialement conçus pour le mobile .
La taille par défaut du viewport pour l'extrémité mobile est 980px(cssPixels),
Par défaut, Le rapport pixel de l'extrémité mobile est 980/ Largeur de l'extrémité mobile (980/750);
Si nous écrivons le Code d'extrémité mobile directement dans la page web ,Voilà.980 Sous le viewport de , Le rapport pixel est très mauvais , Ce qui fait que le contenu de la page est très, très petit ;
Lors de l'écriture d'une page mobile , Assurez - vous d'avoir un rapport pixel plus raisonnable :
1cssPixels Correspondant à 2 Pixels physiques
1cssPixels Correspondant à 3 Pixels physiques
- Peut passermeta Étiquette pour définir la taille du viewport
Chaque appareil mobile est conçu pour , A un rapport de pixels optimal ,
En général, il suffit de définir le rapport pixel à cette valeur pour obtenir le meilleur résultat ;
La taille du viewport qui fixe le rapport de pixels au meilleur rapport de pixels est appelée le viewport parfait .
Définir la taille du viewport device-width Indique la largeur de l'appareil ( Le viewport parfait ):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Copier le Code
InHTML Ajouter une fois metaÉtiquettes, Vous pouvez définir le viewport parfait .
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Définir la taille du viewport device-width Indique la largeur de l'appareil ( Le viewport parfait )-->
<!-- <meta name="viewport" content="width=device-width"> -->
<title>Document</title>
<style> *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: red; } </style>
Copier le Code
La taille des affichages parfaits varie d'un appareil à l'autre :
iphone6 -- 375
iphone6plus -- 414
En raison des différents affichages de périphériques et des différents rapports de pixels ,Donc la même chose375 Les pixels ont des significations différentes selon les appareils ,
Comme dansiphone6Moyenne 375 C'est plein écran ,Et voilàplusMoyenne375 Il manque un morceau
Donc, au moment du développement de l'extrémité mobile , Ne peut plus être utilisé px Pour la mise en page , vw Indique la largeur du viewport (viewport width)
vw Cette Unit é est toujours égale à la largeur du viewport pour le calcul :
Utiliser la largeur en pourcentage , Pour assurer la cohérence de l'affichage à l'extrémité mobile .
Mais il ne peut pas être utilisé width:20%, C'est pour montrer ;Parce que% Par défaut à la référence HTMLLargeur de, Difficile à utiliser en cas de paternité .
Dimensions d'un dessin donné : 750px 1125px
Largeur du dessin ou modèle : 750px
UtiliservwEn unités: 100vw
Sur cette base,Comment créer un 48px x 35px Élément de taille ?
Par 100vw = 750px( Pixels du dessin )
On en est arrivés là.
0.1333333333333333vw = 1px
6.4vw = 48px( Pixels de dessin )
4.667vw = 35px
Oui.48px----> 6.4vw
<style> *{ margin: 0; padding: 0; } .box1{ width: 6.4vw; height: 4.667vw; background-color: #bfa; } </style>
Copier le Code
Lors de l'écriture d'une page mobile basée sur un projet de conception ,Nous utilisonsvwMéthode, Chaque dimension de conception doit être calculée une fois vw,C'est gênant.
html{
font-size:0.1333333vw;
}
.box1{
/* rem - 1 rem = 1 htmlTaille de police pour */
width: 48rem;
height: 35rem;
background-color: #bfa;
}
Copier le Code
InCSSMoyenne,Nous pouvons utiliser1 rem = 1 htmlTaille de police pour, Écrivez la relation de conversion directement à HTML Dans le style de l'étiquette .
Attention!: Pour l'instantchrome Le navigateur du noyau s'affiche normalement , Mais l'ancienne version du navigateur sera HTML Minimum par défaut font-size:12px, Cause display overscale .
Une solution est :
Oui.0.13333333vw Multiplier par un facteur pour faire HTMLDefont-sizePlus grand que12px;
Comme multiplier par 100,C'est devenu13.333333vw = 100px;
1rem=13.333333vw = 100px.
En écrivant un style :
50px( Taille du projet de conception ) Juste écrire ---> 50/100rem.
Disposition réactive
Syntaxe:
all Tous les équipements
print Matériel d'impression
screen Équipement avec écran
speech Lecteur d'écran
Attention!:
Lors de l'utilisation, Vous pouvez ajouter un only,Indique seulement.
only Est principalement utilisé pour la compatibilité avec certaines anciennes versions du navigateur .
@media only screen {
body{
background-color: #bfa;
}
}
Copier le Code
width Largeur du viewport
height Hauteur du viewport
min-width Largeur minimale du viewport ( Prend effet lorsque le viewport est plus grand que la largeur spécifiée )
max-width Largeur maximale du viewport ( Prend effet lorsque le viewport est inférieur à la largeur spécifiée )
Point limite pour le changement de style , On appelle ça un point d'arrêt , C'est - à - dire que le style de la page change à ce point Les points d'arrêt les plus couramment utilisés .
Moins de768 --- Super petit écran --- max-width=768px
Plus grand que768 ---Petit écran--- min-width=768px
Plus grand que992 --- Écran moyen --- min-width=992px
Plus grand que1200 ---Grand écran--- min-width=1200px.
Par exemple, les codes suivants :
<style> @media only screen and (min-width: 500px) and (max-width:700px){ body{ background-color: #bfa; } } </style>
Copier le Code
Rendre la page plus large que 500px,Moins de700pxDans le champ d'application,body La couleur de fond est réglée à #bfa.