Note de service CSS (vi): Flex, page mobile et mise en page réactive

Petit tueur mignon. 2021-09-15 05:00:33
note service css vi flex


flex

01. Boîte élastique

flex( Boîte élastique 、 Boîte télescopique )

  • - Oui.CSS Un autre moyen de mise en page , Il est principalement utilisé pour compléter la mise en page de la page au lieu de flotter ;
  • flex Peut rendre l'élément élastique , Permet aux éléments de changer en fonction de la taille de la page ;

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

flex-direction Indique la disposition des éléments élastiques dans le conteneur .

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 .

Propriétés de l'élément élastique :

flex-grow Indique le facteur d'étirement de l'élément élastique :

  • Lorsque l'élément parent a plus d'espace , Comment les éléments enfants s'étirent ;
  • Espace restant de l'élément parent , Sera réparti proportionnellement ;

flex-shrink Spécifiez le coefficient de retrait de l'élément élastique :

  • .Lorsque l'espace dans l'élément parent n'est pas suffisant pour accueillir tous les éléments enfants , Comment rétrécir les éléments enfants ;
<!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 image.png

Après contraction image.png

02. Styles de récipients élastiques

flex-wrap:

Définit si l'élément élastique s'enroule automatiquement dans un conteneur élastique ;(Largeur du conteneur> Largeur de l'élément )

  • Valeurs facultatives:

    • nowrap Par défaut,L'élément ne s'enroule pas automatiquement;
    • wrap L'élément s'enroule automatiquement le long de l'axe secondaire ;
    • wrap-reverse L'élément s'enroule dans la direction opposée de l'axe secondaire ;

justify-content

Comment? Répartition de l'espace blanc sur la broche ( Comment les éléments de la broche sont disposés )

  • Valeurs facultatives:

    • flex-start Les éléments sont disposés le long du bord de départ de la broche ;
    • flex-end Les éléments sont disposés le long du bord final de la broche ;
    • center Disposition centrale des éléments ;
    • space-around Les Blancs sont répartis de chaque côté de l'élément ;
    • space-between Les Blancs sont répartis uniformément entre les éléments ;
    • space-evenly Les Blancs sont répartis sur un seul côté de l'élément ;
<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

image.png

align-items

  • Définir l'alignement des éléments sur l'axe secondaire ;

  • Définir les relations entre les éléments

    • Valeurs facultatives:

      • stretch Par défaut, Définir la longueur de l'élément à la même valeur
      • flex-start Les éléments ne s'étirent pas , Aligner le bord de départ le long de l'axe secondaire
      • flex-end Aligner le long du bord final de l'axe secondaire
      • center Centrage
      • baseline Alignement de base
<!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

image.png

03. Styles d'éléments élastiques

flex-grow: Coefficient de croissance de l'élasticité ;

/* flex-grow: 1; */

flex-shrink Facteur de réduction de l'élément élastique ;

  • .Le calcul du facteur de réduction est complexe
  • La réduction est basée sur Facteur de réduction Et Taille de l'élément pour calculer

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 ;

  • La valeur par défaut est auto, Indique la hauteur ou la largeur de l'élément de référence lui - même
  • Si une valeur spécifique est passée , Cette valeur prévaut

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

image.png

04. Page mobile

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.

1. Pixelspixel

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

2. Viewportviewport

  • 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)

    • En ce moment,css Le rapport entre les pixels et les pixels physiques est 1:1.
  • Zoomez deux fois sur la situation : Largeur du viewport 960px(CSSPixels) 1920px(Pixels physiques)

    • En ce moment,css Le rapport entre les pixels et les pixels physiques est 1:2.
  • 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 .

3. Le viewport parfait

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

image.png

image.png

4. vwAdaptation

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)

  • 100vw = Largeur d'un viewport
  • 1vw = 1%Largeur du viewport

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

image.png

5. rem

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 .

image.png

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.

05. Disposition réactive

Disposition réactive

  • Les pages Web peuvent présenter des effets différents selon l'appareil ou la taille de la fenêtre ;
  • Utiliser une disposition réactive , Une page Web peut être adaptée à tous les appareils ;
  • La clé pour répondre à la mise en page est Demandes des médias;
  • Accès aux médias , Peut être utilisé pour différents appareils , Ou un état différent de l'appareil pour définir le style séparément .

Demandes des médias

Syntaxe:

  • @media Règles de requête{}
    • Type de média:
      • all Tous les équipements

      • print Matériel d'impression

      • screen Équipement avec écran

      • speech Lecteur d'écran

    • Peut être utilisé, Connexion de plusieurs types de médias , Pour qu'il y ait une relation entre eux

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

Caractéristiques des médias

  • 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.

GIF05.gif

版权声明
本文为[Petit tueur mignon.]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210914174203423r.html

  1. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  2. Vue3.0 using Gaode map to obtain longitude and latitude information
  3. React realizes the function of copying pictures with one click
  4. White space, word break and word wrap are the three most basic and confusing attributes in CSS - thoroughly understand
  5. Trois ans d'expérience d'entrevue avec une femme de programmation diplômée, une réflexion sur la cohérence de l'expiration des données de redis Master slave Node,
  6. Résumé de l'entrevue Android de Dachang, carte technique Android
  7. Un plan de carrière Java correct, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  8. Le résumé de l'entrevue Android de Dachang est en retard
  9. Un article vous a appris à gérer les entrevues sur le Web, à partager 350 vraies questions d'entrevue Java,
  10. Jquery Tools Methodology collation, Sharing a little interview Experience
  11. Jquery plug - in urianchor, app front end Development
  12. $in jquery, Visualized Web Development Tool
  13. Le développement Java doit être fait. Les entrevues https demandent souvent une analyse complète.
  14. vue v-if未生效问题
  15. vue动态改变组件外部元素样式
  16. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  17. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  18. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  19. A Simple Css Meun
  20. Vue modifier dynamiquement le style de l'élément externe du composant
  21. Vue V - si problème non valable
  22. N'osez pas vous opposer à l'intervieweur et obtenir des commentaires personnels des stagiaires d'offer Ali après cinq rondes d'entrevue.
  23. Améliorer continuellement leur capacité à créer des primes, et les questions d'entrevue Java d'Alibaba Huawei Tencent et d'autres grandes usines sont sautées en octets.
  24. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  25. Who doesn't want to make a scratch music by himself? Scratch music is realized by native JS
  26. Learn XPath to help climb the data of major e-commerce platforms in the Mid Autumn Festival
  27. vue動態改變組件外部元素樣式
  28. vue v-if未生效問題
  29. Je ne comprends pas comment la machine virtuelle JVM peut encore interviewer, et j'ai terminé ce dictionnaire d'entrevue Java de 1307 pages.
  30. Dongxh, mid autumn festival gifts 🥮, [CSS starry sky realization, Mid Autumn Festival poem]
  31. What if you want to see the moon and don't want to go out
  32. Mid Autumn Festival, Chang'e looks at the moon
  33. Mid Autumn Festival special! Use the simplest animation animation to make the most local and trendy holiday blessing greeting card. This romantic male and female tears of Xiao Chen.
  34. [Pixi] super beautiful! How to make mid autumn festival scene level animation!!
  35. Echarts realizes the rotation of the moon (super simple, you can see it at a glance)
  36. Dart mixin full resolution
  37. Some suggestions on Vue code readability | comments are rewarded
  38. 120 lines of code to achieve pure web video editing
  39. Yang yangsun took a selfie to celebrate his 30th birthday, and Wang Yanlin sent blessings.
  40. Comment passer une entrevue avec une entreprise Internet de première ligne, Android Classic Getting started tutoriel
  41. Comment essayer un développeur Android vraiment niveau, 【 résumé de l'entrevue 】
  42. Wang Ou went back to the hotel with the man at night. It was suspected that his relationship was open. The netizen replied mercilessly: is the man single
  43. 借助HTML ping属性实现数据上报
  44. APNG在线制作、兼容、播放和暂停
  45. Apng production, compatibilité, lecture et pause en ligne
  46. Mise en œuvre de l'escalade des données avec l'attribut de Ping HTML
  47. Comment envoyer 100 000 requêtes http le plus rapidement possible
  48. JQuery Basics
  49. Front and back end data interaction (V) -- what is Axios?
  50. Serverless is a model architecture invented driven by economic benefits- Grady
  51. Les questions d'entrevue pour les ingénieurs Java d'Internet, les intervieweurs rencontrés sont tous de niveau architecte,
  52. Cinq ans d'entrevue d'expérience en développement Java, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  53. La dernière collection de questions d'entrevue Java haute fréquence organisée cette année, 2021 Java Universal Popular Framework
  54. Intel selected Weilai es8 to promote driverless taxis in Europe
  55. JavaScript operator (1), Web Development Engineer
  56. Trier les questions d'entrevue Javascript, trier les points de connaissance des itinéraires d'apprentissage
  57. Song Mengjun's "sleepless night" triggered an upsurge of dance storm after 00
  58. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  59. Encapsulated PHP sends HTTP requests with curl. Get and post are very easy to use
  60. Front and back end data interaction (V) -- what is Axios?