Learning-Responsive web design: Media queries and viewport

Source: Internet
Author: User

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?

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.