156 lines
4.7 KiB
HTML
156 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>0_min_max_width.html</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- IMPORTANT pour que la taille de l'écran soit concidérée -->
|
|
<!-- https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/meta/name/viewport -->
|
|
|
|
<style>
|
|
:root {
|
|
--maxw: 600px;
|
|
--maxw_extra: 900px;
|
|
}
|
|
#width_full_page,
|
|
#width_bloc_textarea,
|
|
#width_part_vw
|
|
{
|
|
padding: 10px; border: 1px solid;
|
|
background: yellow;
|
|
}
|
|
|
|
.min_max_width {
|
|
min-width: 500px;
|
|
max-width: var(--maxw_extra);
|
|
}
|
|
|
|
/* vue adaptative aka. responsive design */
|
|
@media (max-width: 638px) { /* == S'applique tant que l'écran a une largeur maximum de... 638px (et -) */
|
|
/* == Si l'écran a une largeur max de 638px */
|
|
/* ..... ok .... ok .... 638px || non */
|
|
#width_full_page {
|
|
background: rgb(34, 255, 0);
|
|
}
|
|
}
|
|
@media (min-width: 700px) { /* == Si l'écran est large au minimum de... 700px (et +) */
|
|
/* non || 700px ..... ok .... ok .... */
|
|
#width_full_page {
|
|
background: rgb(255, 102, 0);
|
|
}
|
|
}
|
|
|
|
/* EXTRA/bonus ":has".... */
|
|
/* Si xxx:has(yyy) == "SI xxx contient yyy" */
|
|
/* Ici, on garde la taille fixe si le bloc contient une textarea */
|
|
.min_max_width:has(textarea) {
|
|
min-width: var(--maxw);
|
|
max-width: var(--maxw);
|
|
}
|
|
textarea {
|
|
width: var(--maxw); /* initial */
|
|
max-width: calc(var(--maxw) - 10px);
|
|
min-width: 400px;
|
|
min-height: 100px;
|
|
max-height: 300px;
|
|
display: block;
|
|
}
|
|
|
|
/* On peut utiliser des unités de mesure relatives aux dimensions de l'écran */
|
|
/* vw pour widht (largeure) -- vh pour height (hauteur) */
|
|
/* MDN === https://developer.mozilla.org/fr/docs/Learn_web_development/Core/CSS_layout/Responsive_Design#utiliser_les_unités_relatives_à_la_zone_daffichage_pour_la_typographie_adaptative*/
|
|
/* Pas tres pratique pour faire des colonnes fixes, on utilisera plutôt flexbox */
|
|
#width_part_vw {
|
|
width: 30vw;
|
|
margin: auto;
|
|
margin-top: 4rem;;
|
|
}
|
|
.flexible_vw {
|
|
width: 32vw;
|
|
padding: 10px; border: 1px solid;
|
|
background: yellow;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
}
|
|
#flexible_vw_wrapper {
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a href="./0_intro.html#width_details_max_min"><- Retour</a><br><br>
|
|
|
|
|
|
<div style="white-space: pre-line;"><kdb class="key">CTRL+MAJ+I</kdb> outils de dev.
|
|
<kdb class="key">CTRL+MAJ+M</kdb> -> Vue adaptative
|
|
|
|
<div class="resume">MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries#cibler_des_caractéristiques_média" target="_blank">CSS_media_queries</a>
|
|
MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:has" target="_blank">:has</a>
|
|
MDN html <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/textarea" target="_blank">textarea</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="width_full_page" class="min_max_width">
|
|
#width_full_page
|
|
</div>
|
|
|
|
<div id="width_bloc_textarea" class="min_max_width">
|
|
#width_bloc_textarea
|
|
<textarea>Ecire un truc</textarea>
|
|
</div>
|
|
|
|
<div id="width_part_vw" class="">
|
|
#width_part_vw
|
|
</div>
|
|
|
|
<div id="flexible_vw_wrapper">
|
|
<div class="flexible_vw" class="">
|
|
.flexible_vw
|
|
</div>
|
|
<div class="flexible_vw" class="">
|
|
.flexible_vw
|
|
</div>
|
|
<div class="flexible_vw" class="">
|
|
.flexible_vw
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
/* pour +de lisibilité je le met style ici... */
|
|
|
|
kdb.key {
|
|
background: gray;
|
|
color: #fff !important;
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
padding: 3px 13px;
|
|
border-radius: 4px;
|
|
}
|
|
kdb.key {
|
|
font-size: 1em;
|
|
padding: 0px 10px;
|
|
}
|
|
* {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.resume {
|
|
white-space: pre-line;
|
|
border: 1px solid #aaf;
|
|
border-radius: 0;
|
|
padding: 0px;
|
|
line-height: 1.8em;
|
|
background: #f2f2ff;
|
|
padding: 15px 10px 20px 20px;
|
|
}
|
|
</style> |