Responsive Layout Basics

I. What is responsive layout

1. Enable a website to be compatible with devices of different resolutions

2. Give users a better visual experience

Emergence background: Multi-terminal display of mobile internet

Http://www.jser.me

Ii. advantages and disadvantages of responsive design

Advantages: Solve the difference between the equipment display

Disadvantages: Many compatibility code, heavy workload, loading speed is affected;

The original site layout will have an impact, user interpretation may not be accurate

Three, the principle of responsive design

1. Mobile first: In the early design of the page to consider how to display the multi-terminal

2. Progressive enhancement: Give full play to the maximum function of the hardware device

Iv. How to achieve responsive layout

1.css3-media Query (The simplest way)

2. Native JavaScript (high cost, not recommended)

3. Third party open source framework (can support the design of browser responsive layout well)

Responsive Layout Basics