There are many devices through which we access websites and applications, from phones and tablets, through laptops and desktops, to huge TVs. Additionally, all of these devices have models of various screen sizes. Webmasters need to make their sites and applications equally well viewable on all of these devices.
Responsive web design makes the look of web pages equally appropriate for the sizes of all devices. This is achieved using HTML and CSS languages.



Make Responsive Web Design using Media Queries

The first step is add on a web page inside the <head> section meta name = "viewport" tag with initial-scale property whois controls the zoom level when the page is first loaded.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Media query is a CSS technique, it uses the @media rule to include a block of CSS properties only if a certain condition is true.

<div id="content">
</div>


result:



ja
@media only screen and (max-width: 600px) {
}
@media only screen and (min-width: 600px) {
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {

}
<link>