-
We don’t focus on the device. Instead, we have to think of the
viewportsize. -
Responsive design focus is on mobile first. This means that when creating our applications and webpages we start by writting
cssfor mobile viewports, and move up to target the bigger screen sizes withmedia-queryrules. -
Instead of making an app for desktop and then trimming it to fit the mobile, we instead make it for mobile first with most essential features and then work up from there when creating a desktop version.
-
The viewport is the user's visible area of a web page.
-
To determine the viewport size we can use the Chrome DevTools - Responsive Device Bar
<meta name="viewport" content="width=device-width, initial-scale=1.0">The content="width=device-width property instructs the page to match the screen's width.
The initial-scale property controls the zoom level when the page is first loaded.
- Without a viewport meta tag, mobile devices render pages at typical desktop screen widths, and then zoom out the page in order to fit the mobile screens.
Media query @media rules determine when another CSS style starts applying. We call this a breakpoint.
CSS responsive units are units that are relative to the viewport size.
vw. - Viewport width.1 vwequals 1% of the viewport width.vh- Viewport height.1 vhequals 1% of the viewport height.
-
px- specifies the height of the letters in CSS pixels -
em- Is relative to the element's parent font size. -
rem- is relative to the root (<html>) element's font size.
We can load different stylesheets for different viewport sizes, using the <link> tag:
Example - Add to the previous code
<!-- Add to the <head> -->
<link
rel="stylesheet"
href="loaded.css"
media="screen and (min-width:1050px) and (max-width:1150px)"
>
<!-- Stylesheet `loaded.css` will be loaded by the browser only for the screens
between 1050px (minimum) and 1150px (maximum)-->/* loaded.css */
body {
background-color: pink;
}
p {
font-size: 40px;
color: red;
} <h1>Responsive images</h1>
<div class="container">
<img src="./logo-ironhack.png" alt="">
</div>/* MAKING THE IMAGE RESPONSIVE */
img {
width: 100%;
height: auto;
} <h1>Responsive div background</h1>
<div class="image-div"></div>/* SETTING THE DIV BACKGROUND IMAGE AND SIZING */
.image-div {
margin: 0 auto;
width: 100%;
height: 500px;
border: 2px solid navy;
background-image: url("./river_canyon.jpg"); /* Link to the background image */
background-repeat: no-repeat; /* don't repeat the image if there is remaining space */
background-size: cover; /* Resize the background image to cover the entire container */
background-position: center; /* Center the image */
}
ok