Responsive design and response design

Responsive design and response design

1. What is responsive design?

Responsive design is to perform operations and layout based on user operations and device environments during website development, so that the website can intelligently adjust the platform, screen size, and screen orientation of different systems, make corresponding la s, such as on PCs, iPhones, Android, and ipad, to achieve smooth browsing on smart mobile phones, tablets, and other smart mobile terminals to prevent page deformation, automatic page resolution, image size, and script functions can be automatically switched to adapt to different devices, and website data can be synchronously updated on any browser terminal, it can provide more comfortable interfaces and better user experience for users of different terminals.

2. What are the advantages of a responsive approach?

Responsive design features high flexibility in the face of different resolution devices. It can quickly solve the problem of multi-device display adaptation. It can be compatible with multiple smart mobile browsing terminals and automatically adapt to its screen size and uniform style, the website recognition is increased, and the background and database used by the responsive website are unified, that is, after the website content is edited on the PC end, mobile phone, PAD, and other smart mobile browsing terminals can synchronously display modified content, and the management of website data can be more timely and convenient. Improve the technical quality of the website, provide users with a friendly Web interface, better explore potential customer groups, and bring more access traffic to the website.

3. What are the principles and technical points of the responsive approach?

①.Meta tag definition:The meta tag is an important tag for website development. It can be used to identify the author, set the page format, and mark the content feed and keywords, and refresh pages. It responds to some useful information from the browser to help display the webpage content correctly and accurately.

　　②.Use Media query to adapt to the corresponding style:You can use different media types and conditions to define style sheet rules. You can set the handheld direction of the device, horizontal or vertical orientation (portrait | lanscape), and resolution of the device; syntax structure and usage: @ media device name only (selection condition) not (selection condition) and (device selection condition ).

③.Responsive processing of tables:The table automatically changes as the Web page or device changes. You can use tr (row and column), td (vertical column), or colspan (horizontal merge) or rowspan (vertical merge) complete the page layout to implement responsive design.

④.Third-party frameworkBootstrap:Reference the bootstrap plug-in to implement responsive webpage design more quickly.