Responsive Design is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Media queries introduced in CSS3 allows the page to use different CSS style rules based on commonly the width of the browser.
The following code indicates in the width of 0~600px, HTML tags with class=”sidebar” disappear.
<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
.sidebar {
display: none;
}
}
</style>
Since 2015, Google use mobile-friendliness as a ranking signal in search results, A website that is not a responsive website or mobile-friendly will suffer negative SEO and decreased search engine rankings.
Responsive Design