Responsive Responsive layout Layout
Mobile device size
Size of the mobile device are different, can be roughly divided as follows:
768px The following is the mobile phone screen
768px-991px is a flat screen ipad
992px-1199 is a large flat screen
1200 The above is an extremely big screen
-Class version of the heart
Small Screen: 768px-992px 750px wide version of the heart
in the screen: 992px-1200px version of the heart 970px wide
big screen: 1200px version of the heart more than 1170px wide
Responsive layout
Simultaneously automatically adjust the size of the various page layout screen layout is responsive, in response to the layout is capable of dynamically switching css style different screen sizes according to the layout of the control.
Media Inquiries
Css media queries can be used to change the width of the container to achieve the response achieved according to the layout of different screen sizes, as shown in the code below, the query may be a different @media by the same element in each write css code query, this version of the heart .w box centered on large-screen devices, and in the mobile phone device which is based on 100% of the display screen, small screen is also required in the version of the heart center, we can do this is to use the @media media queries. After a media query is a front cover.
height: 50px;
color: white;
margin: auto;
text-align: center;
}
/*手机*/
@media screen and (min-width:0) {
.w {
width: 100%;
background: red;
}
.w::after {
content: "手机"
}
}
/*小平板*/
@media screen and (min-width:768px) {
.w {
width: 750px;
background: #4800ff;
}
.w::after {
content: "小平板"
}
}
/*大平板*/
@media screen and (min-width:992px) {
.w {
width: 970px;
background: green;
}
.w::after {
content: "大平板"
}
}
/*pc*/
@media screen and (min-width:1200px) {
.w {
width: 1170px;
background: black;
}
.w::after {
content: "pc"
}
}
<div class="w"></div>
Copy the above code, after storage in the browser opens a browser width is adjusted to obtain a different version of the heart wide.