Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Units: px (pixels)

Fixed size on a given screen, If used with Media Queries we have to manually calculate and update each value.

<html>
<head>
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">
  <title>Text units - px</title>
  <link href="page_px.css" rel='stylesheet' />
</head>
<body>
<h1>My Title</h1>
<p>This is the paragraph of our page.</p>
<div class="separator">
</div>

</body>
</html>


html {
   font-size: 10px;
}

.separator {
    width: 100%;
    height: 100px;
    background-color: blue;
}

h1 {
   font-size: 30px;
}

p {
   font-size: 20px;
}

@media screen and (min-width: 800px) {
    .separator {
        height: 150px;
    }
    h1 {
        font-size: 45px;
        text-align: center;
    }
    p {
        font-size: 30px;
        text-align: center;
   }
}