comment fonctionnent les media-queries

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : comment fonctionnent les media-queries

Re: comment fonctionnent les media-queries

par two3d » 16 mars 2021, 13:02

Salut, dans le head tu doit déclarer la meta "viewport" :
<meta name="viewport" content="width=device-width, initial-scale=1">

Des tutos sympa en Français existent: https://developer.mozilla.org/fr/docs/W ... ia_queries

En gros, pour définir des règles sur les écrans qui font une taille inférieur à 640px (exemple), on définira dans le fichier .css:
@media (max-width:640px){
    .maClassePourPetitsEcrans{ /* du style */ }
}

comment fonctionnent les media-queries

par flexi2202 » 14 mars 2021, 17:39

bonjour a tous
je commence a utiliser les media-queries et déjà je suis confronte a un soucis

j aurais plusieurs questions
mais je commence par la premiere

es ce que je dois déclarer quelque chose dans le head ?

ensuite
je souhaiterais que le contenu de ma col-sm-4 puisse commencer a utiliser le font-size pour les petits écrans
je m y prends de cette façon

media screen and (max-width: 576px) {
col-sm-4 {
5vw;;
}
}


2 eme question
je souhaite stopper le responsive sur un bloc pour les petits écrans
je dois m y prendre comment
merci pour l aide