Learning-Responsive web design: Media queries and viewport

Objective

With more and more people using mobile devices, the mobile version of the website is becoming more and more important, but the size of the mobile device, the screen resolution is different, we can not for Blackberry,iphone, the ipad and so on each have a separate page design. So we need the website design to meet a variety of device requirements and compatible with all screen resolution, this design is called Responsive web design

What is responsive web design (responsive web)?

Responsive web design is a design that enables web design and development to respond to the user's behavior and environment based on screen size, platform, and direction. It includes a flexible grid and layout, image and intelligence using the CSS media queries features. When a user switches from laptop to the ipad, the site should automatically switch CSS rules to accommodate device resolution, image size, and script execution. In other words, responsive web design is a technology that automatically responds to user preferences. This will be once and for all to meet the new listing of mobile terminals need to be different design and development needs.

It should be noted that responsive web design is not just

The following figure lists some of the most common:

So, if you want to make your customer satisfied, you must allow your site to automatically adjust and fit the screen of the above device. For example, you should customize different layout structures for different devices:

Custom Layouts

Also, there are times when you want to show or hide something as needed:

Show or hide content

Obviously, we can't customize a page for each device. So, how should we deal with this situation?