1、 What is Responsive Layout?
Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, a website can be compatible with multiple terminals - rather than a specific version for each terminal. This concept was born to solve the problem of mobile Internet browsing.
Responsive layout can provide users of different terminals with more comfortable interfaces and better User experience , and with the popularization of large screen mobile devices at present, it is not too easy to describe the general trend. As more and more designers adopt this technology, we not only see a lot of innovation, but also see some forming patterns.
2、 What are the advantages and disadvantages of reactive layout?
advantage:
Strong flexibility for equipment with different resolutions
It can quickly solve the problem of multi device display adaptation
Disadvantages:
Compatible with all kinds of equipment, heavy workload and low efficiency
The code is cumbersome, and there will be hidden useless elements, which will take longer to load
In fact, this is a kind of compromise design solution, which can not achieve the best effect due to various factors. To some extent, it has changed the original layout structure of the website, which will lead to user confusion.
3、 How to design a responsive layout?
We have learned what responsive layout is, and how to design it in our actual project? In the past, when we design websites, we will be different browser Now we need a different size device, how can we settle down? If there is a demand, there will be a solution. Well, when it comes to responsive layout, we have to mention Media Query in CSS3.
1. What is Media Query in CSS?
Define style sheet rules through different media types and conditions. Media query enables CSS to act more accurately on different media types and different conditions of the same media. Most media features of media query accept min and max to express "greater than or equal to" and "smaller than or equal to". For example, width can have min width and max width media queries that can be used in the @ media and @ import rules in CSS, as well as in HTML and XML. Through this tag attribute, we can easily realize rich interfaces under different devices, especially mobile devices, which will be more widely used.
2. What values can media query obtain?
The width and height of the device device width, device height display screen/tactile device.
Width and height of rendering window, height display screen/tactile device.
The handheld direction of the device, horizontal or vertical orientation (portlet | lanscape) and printer.
Picture scale ASP Ect ratio dot matrix printer, etc.
Device aspect ratio dot matrix printer, etc.
The object color or color list color, color index displays the screen.
The resolution of the device.
3. Syntax structure and examples
When using the Media Query style module, you must start with "@ media". The form is as follows:@ Media screen and (max width: 960px) {/* CSS example */}
Source extension response theme Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Example of Tuoyuan Responsive Theme</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <style> *,body { margin:0; padding:0; } .wrapper { width:100%; min-width:1200px; background:# eee; overflow: hidden; } .wrap { width:1200px; min-width:1200px; margin:0 auto; padding:0 10px; background:# ccc; } .header { height:200px; background:# 666; } .main { min-height:1010px; padding:10px 0 0; background:# 999; } .sidebar { width:200px; min-height:1000px; float: left; background:# 666; } .content { width:990px; min-height:1000px; float: right; background:# 333; } .footer { height:100px; background:# 666; } @media screen and (max-width:1280px) { .wrapper { width:980px; min-width:980px; margin:0 auto; } .wrap { width:960px; min-width:960px; } .content { width:750px; } } @media screen and (max-width:1000px){ .wrapper { width:820px; min-width:820px; margin:0 auto; } .wrap { width:800px; min-width:800px; } .content { width:600px; } } @media screen and (max-width:850px){ .wrapper { width:520px; min-width:520px; margin:0 auto; } .wrap { width:500px; min-width:500px; } .header { height:100px; } .sidebar { display: none; } .content { width:100%; } } @media screen and (max-width:550px){ .wrapper { width:90%; min-width:90%; margin:0 3%; padding:2%; border:1px solid #ddd; } .wrap { width:100%; min-width:100%; padding:0; } .sidebar { display: none; } .content { width:100%; } } </style> </head> <body> <div> <div> <div></div> <div> <div></div> <div></div> </div> <div></div> </div> </div> </body> </html>
