what and why: responsive web design
Simple may be a beautiful thing, even in web development, too.
The evolution of viewport from big to small screen makes the technology of layout design progress toward simplicity. It is called responsive web design, RWD, which responds to a diverse screen by different layouts and purpose to bring simple jobs to developers.
how: demo in HTML & CSS
Here’s the demo on a menu with responsive web design.
We’ll try to do it through a stylesheet of media queries. Let’s start off the design on a small screen. It may help us figure out the most important feature within the limit screen.
First, under the HTML header, in the meta element, set viewpoint width equal to device-width. Without it, the full content is difficult to read as a result of smaller content.
<
meta name="viewport" content="width=device-width, initial-scale=1.0"
>
Next, Design a button.
Set a go to menu button with a tag to link to the menu.
Here I put 3 greater than mark as a open icon.
<button>
<a href="#menu"> <<<
</a>
</button>
Also, give it some color and circle shape by border-radius to 50%. then, set the position fixed at right top. That means when the page’s scrolled, the button is at the same place.
button {
background: lightpink;
height:6em;
width:6em;
position:fixed;
border-radius:50%;
right:1em;
top:2em;
}
Next, build a menu. Put features in div tag and given an id name with the menu, here has blog, about and contact. Then set a return button with a tag to link back to the main page. I put a 3 less than mark as a close icon.
<button>
<a href="#" >>>
</a>
</button>
<div>blog<div>
<div>about<div>
<div>contact<div>
Also, give menu some color and position. Here we set background to pink, and give it a full page fixed view by width, height up to 100 viewport. For typography, give text-align at center, line-hight to 5em.
button {
background: pink;
height:100vh;
width:100vw;
position:fixed;
border-radius:50%;
text-align:center;
line-height:5em;
}
Next, the magic is coming!
As the menu would only display
when the button of go to menu is clicked,
so, let’s set magic display value with none to hide the menu.
Then in a pseudo class :target and :focus,
set display value with block to show the element
when it gets focus.
#menu {
display: none;
}
#menu:target, #menu:focus {
display: block;
}
That’s it. The mobile layout is ready.
Then, The most fun part, Responsive design.
Here, We tend to respond to 3 different screens, one for mobile, another for tablet, then for desktop. Let’s use @media to set the breakpoint in small, medium, and large screens to 480px, and 821px. The at-rule is only applied when the media type and condition both match.
That means if the screen is lower than 480px, the menu will be hidden behind the button as described above.
In other words, If the screen is between 481-821px, then the menu aims to be on the right side. We try to set display property to flex, then, flex-direction decides the direction of items. here set property to column as the menu will be in the right area. Also, give it width and height to 35 and 100 viewport. Meanwhile, set a button with none display, as the menu is already on the screen.
@media (min-width: 481px) and (max-width: 821px){
button {
display: none;
}
#menu {
display: flex;
flex-direction: column;
}
}
Otherwise, the screen is higher than 822px. as we set the property to row, the menu just lies on the top screen alone. We also give it width and height to 100 and 35 viewport, as opposed to tablets.
@media screen and (min-width: 822px ) {
button {
display: none;
}
#menu {
display: flex;
flex-direction: row;
}
Wow! Cool, that’s it. Does it look more clear than it was? I love it.
next:device
Next, in media queries level 5 specification, the viewport in separate displays (e.g.:foldable mobile) seems to come by the feature of horizontal-viewport-segments, vertical-viewport-segments. That means the media query could set different conditions depending on multiple segments. Woo! How exciting is it? Hope seeing them soon with browser compatibility. ya!