国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Disposition de bureau à 3 colonnes vers mobile à 1 colonne sans requêtes multimédias
P粉085689707
P粉085689707 2023-12-23 14:03:05
0
1
643

Certaines questions sont examinées ici, mais elles ne résolvent pas tout à fait le problème que je recherche.

Supposons que j'ai un site Web et que je le veuille. Sur le bureau, je veux ceci :

C'est facile. grid-template-columns: 重復(fù)(3, 33%) (En gros)

Mais sur mobile, je veux ?a

Ce que j'ai rencontré s'est produit avant qu'il ne reste une seule colonne?:

J'essaie clamp()、minmax() et toutes sortes de choses, mais rien ne fonctionne comme je le souhaite. Oui, je pourrais certainement utiliser des requêtes multimédias, mais j'aimerais créer une mise en page grille/flex vraiment fluide en utilisant du CSS moderne (comme clamp, grid, minmax, etc.) afin qu'aucune requête multimédia ne soit nécessaire pour apporter des modifications de mise en page de base. < /p>

Je sais que cela ne fonctionne pas, mais comme point de départ pour les requêtes, voici une version simple d'une de mes 100 tentatives :) Dans cette version, j'essaie de passer de répétition(3) à répétition(1) en utilisant clamp) . 

.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}
<div class="wrapper">
  <div class="item one"><h3>Example A</h3></div>
  <div class="item two"><h3>Example Two</h3></div>
  <div class="item three"><h3>Third Example</h3></div>
</div>

P粉085689707
P粉085689707

répondre à tous(1)
P粉070918777

Article complet avec des règles plus générales : https://css-tricks.com/responsive-layouts-fewer-media-queries/

Ceci est utilisé en base flexible max(0px, (400px - 100vw)*1000) 的想法。如果 100vw（屏幕尺寸）大于 400px，則此公式將給出 0px，或者在相反情況下給出一個(gè)非常大的值，為每個(gè)元素提供一個(gè)big flex-basis 并創(chuàng)建一個(gè)包裝。只需調(diào)整 400px 即可扮演 @media (max-width:400px)

.container {
  display:flex;
  flex-wrap:wrap;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
  flex-basis:max(0px, (400px - 100vw)*1000);
  flex-grow:1;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

En utilisant CSS Grid, cela peut ressembler à ceci?: 

.container {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(30%, (400px - 100vw)*1000, 100%),1fr));
  grid-gap:5px;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Une question similaire où je contr?le le nombre maximum de colonnes sans requêtes multimédias?: Grille CSS - Nombre maximum de colonnes sans requêtes multimédias

Nous pouvons étendre la solution ci-dessus pour considérer des cas plus complexes.

Exemple de passage de 6 colonnes à 3 colonnes à 1 colonne : 

.container {
  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(15%,(800px - 100vw)*1000, 30%), (400px - 100vw)*1000, 100%)
      /* if(screen> 800px) 15% elseif(screen> 400px) 30% else 100% */
      ,1fr));
  grid-gap:5px;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Pour comprendre ces valeurs, considérez les plages suivantes?: 

100%/7  100%/6  100%/5  100%/4  100%/3  100%/2  100%/1
 14.3%  16.7%    20%     25%     33.3%   50%     100%

Pour obtenir 6 colonnes dont nous avons besoin ]14.3% 16.7%] 范圍內(nèi)的值（我考慮的是 15%) Pour obtenir 3 colonnes dont nous avons besoin ]25% 33.3%] 范圍內(nèi)的值（我考慮的是 30%)

Nous évitons simplement les bords pour nous assurer de tenir compte des espaces.

Une solution plus générale utilisant des variables CSS, où j'ajouterais 0.1% pour m'assurer que la valeur est suffisamment grande pour obtenir le nombre de colonnes souhaité et peut combler les lacunes.

Nous ajoutons également une coloration dynamique (en relation?: Comment changer la couleur d'un

élément en fonction de sa hauteur ou de sa largeur ? ) 

.container {
  /* first breakpoint*/
  --w1:800px;
  --n1:6;
  /* second breakpoint*/
  --w2:400px;
  --n2:3;

  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(100%/(var(--n1) + 1) + 0.1%, (var(--w1) - 100vw)*1000,
                         100%/(var(--n2) + 1) + 0.1%), (var(--w2) - 100vw)*1000,
                         100%), 1fr));
  grid-gap:5px;
  margin:10px 0;
}

.container div {
  height:100px;
  border:2px solid;
  background:
    linear-gradient(blue  0 0) 0 /1% calc(var(--w2) - 100vw),
    linear-gradient(green 0 0) 0 /1% calc(var(--w1) - 100vw),
    red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="--w1:900px;--n1:8;--w2:500px;--n2:4;grid-gap:10px;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="--w1:600px;--n1:4;--n2:2;grid-gap:2vw;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Avec flexbox, nous pouvons avoir un comportement différent (éventuellement souhaité) où le dernier élément d'une ligne occupera tout l'espace disponible?: 

.container {
  /* first breakpoint*/
  --w1:800px;
  --n1:6;
  /* second breakpoint*/
  --w2:400px;
  --n2:3;

  display:flex;
  flex-wrap:wrap;
  margin:10px 0;
}

.container div {
  height:100px;
  border:2px solid;
  margin:5px;
  flex-basis:clamp(clamp(100%/(var(--n1) + 1) + 0.1% ,(var(--w1) - 100vw)*1000, 
                         100%/(var(--n2) + 1) + 0.1%),(var(--w2) - 100vw)*1000, 
                         100%);
  flex-grow:1;
  box-sizing:border-box;
  background:
    linear-gradient(blue  0 0) 0 /1% calc(var(--w2) - 100vw),
    linear-gradient(green 0 0) 0 /1% calc(var(--w1) - 100vw),
    red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="--w1:900px;--n1:8;--w2:500px;--n2:4;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="--w1:600px;--n1:4;--n2:2;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal