ptg16476052452 LESSON 16: Using Responsive Web Design
You can combine them with the keyword and. For example, to add styles to any browser
that is wider than 320 pixels and narrower than 1024 pixels:
@media (min-width: 320px and max-width: 1024px) { ... }Breakpoints
A CSS breakpoint is a media query to separate the style sheet into two parts: the part
outside the query and the part inside. Breakpoints are typically based on the browser’s
width, but they don’t have to be. You can set them to any media feature or combination
you would like. The thing to remember is that for every breakpoint there will be one
additional design. In other words, one breakpoint equals two designs, two breakpoints
equals three designs, and so on.
Here is the HTML and CSS to make a page with two breakpoints. As you can see, there
are two media queries, so there will be three possible designs:Input ▼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Two Breakpoints</title>
<style>
body {
color: blue;
font-family: "Handwriting - Dakota", "Lucida Calligraphy Italic", Papyrus;
}
@media all and (min-width:480px) and (max-width:800px){
body { color: red; }
}
@media screen and (min-width:801px){
body { color: green; }
}
</style>
</head><body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id purus nec
eros semper luctus. Proin nisl lectus, ullamcorper ultrices leo in, tristique
rutrum risus. Morbi congue diam tempor lorem semper, congue tempor turpis
pretium. Nunc eget dui ut lorem auctor ornare. Vivamus lectus purus, vehicula eu
velit eu, iaculis ultrices dui. Aliquam consectetur risus non ligula blandit, et
gravida lectus bibendum. Etiam laoreet luctus nibh. Nulla sit amet lorem quis
arcu accumsan mollis.</p></body>
</html>