What is responsive layout? Introduction to responsive layout

What is responsive layout? Nowadays, responsive layout is becoming more and more popular, but many friends still don’t know what responsive layout is. So, the following article will introduce to you what responsive layout is. Friends who are interested You can take a look.

First let’s take a lookWhat is responsive layout?

According to Baidu Encyclopedia, we can know: Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, it is a website that can be compatible with multiple terminals - not for Each terminal makes a specific version. This concept was born to solve mobile Internet browsing.

In layman’s terms, responsive layout means making a website compatible with multiple terminals at the same time, transforming one website into multiple websites, which greatly saves resources for us.

There are four levels of responsive interface:

1. The same page should look comfortable in different sizes and proportions;

2. The same The page should look reasonable at different resolutions;

4. The experience of the same page under different operation methods (such as mouse and touch screen) should be unified;

5 , the same page on different types of devices (mobile phones, tablets, computers), the interaction method should be consistent with habits.

After knowing what responsive layout is, let’s talk about it brieflyHow to use responsive layout

# #1. Layout and setting meta tags

When creating a responsive website, or when a non-responsive website becomes responsive, you must first pay attention to the layout of the elements; for example, on mobile devices, we must prohibit user to zoom the screen. If it is not prohibited, it may cause dislocation in the display, and the display may not be the style of the mobile website. Therefore, we need to use code to prohibit users from zooming the screen on the mobile phone to achieve the normal mobile website effect.

2. Set the style through media query media query

Media query is the core of responsive design. It can communicate with the browser and tell the browser how to render the page. If a terminal If the resolution is less than 980px, you can write it like this. The layout at this time will overwrite the previously set layout.

3. Set multiple view widths

4. Responsive pictures

The usage of responsive layout will be briefly introduced here. For responsive For in-depth understanding, you can pay attention to the relevant columns of the php Chinese website to learn! ! !

The above is the detailed content of What is responsive layout? Introduction to responsive layout. For more information, please follow other related articles on the PHP Chinese website!