bonnebulle/__html_css_js
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

mise à jour cours 0_intro (html css)

Browse Source
This commit is contained in:
bonnebulle
2025-10-18 20:23:15 +00:00
parent 1c1f514531
commit 26bcfeec64
13 changed files with 1247 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
public/0_min_max_width.html Normal file
View File

@@ -0,0 +1,156 @@
<!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>