device screen sizes
December 2, 2022 Reading time: ~1 minute

Here's a list of screen sizes by device:

  • 320px — 480px: Mobile devices.
  • 481px — 768px: iPads, Tablets.
  • 769px — 1024px: Small screens, laptops.
  • 1025px — 1200px: Desktops, large screens.
  • 1201px and more — Extra large screens, TV.

(Thanks FreeCodeCamp!)

In the CSS document, place the @media rule after the first no-rule is applied. For instance:

main {
    width: 55%;
    max-width: 400px;
}

@media screen and (max-width: 500px) {
    main {
        width: 85%;
    }
}

<body> default margin
November 24, 2022 Reading time: 2 minutes

J'ai enfin compris que certains éléments HTML avaient une marge et/ou padding par défaut appliquée par les navigateurs, par exemple <body> a une marge par défaut de 8px sur Firefox. Résultat : si vous coloriez votre page en jaune :

body {
 background-color: gold;
}

et votre tête de page en bleu (en fournissant une hauteur pour que le bloc soit visible) :

header {
 background-color: aqua;
 height: 200px;
}

pour la page suivante :

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
    </body>
</html>

eh bien vous verrez apparaitre ce qui semble être une bordure non sollicitée de votre <header> ! D'après ce que j'ai compris, il s'agit plutôt de l'espace que se ménage le <body> par rapport à ses éléments enfants donc c'est plutôt sur <body> qu'il faut agir. Pour le débarrasser de ses marges cachées, proposition de solution :

body {
 background-color: gold;
 margin: 0;
}

(Voir sinon une autre proposition dans un article plus récent.) C'est le même principe pour tous les éléments qui ont une marge par défaut paramétrée par le navigateur, <h1> par exemple ou encore, <ul>.

Search

Categories