The so-called responsive layout, that is, the page will be adjusted according to the size of the currently running their own equipment, implementation mainly in the following three ways:
1) Hide
For example, in some Links PC side or unimportant content in the mobile client can choose to hide it.
2) Wrap
Line display content on the PC side, the mobile terminal device is relatively small width, it is possible to choose to display several lines.
3) adaptive spatial
For example, given a particular element of the left side value, the width of the element to the right so that it adjusts itself to the different width of the device.
The specific method are the following:
1）rem
rem is a relative unit, generally 1rem = html value of font-size settings.
For more information about rem can refer to mobile web development adaptation Cheats Rem This free course.
By setting the different devices html rem font-size changing value, so that the value increases as the unit 1rem apparatus increases.
2）viewport
Setting <meta name="viewport" content="width=device-width, initial-scale=1.0" >, the following will be introduced on this.
3）media query
What determines whether the current device, then set depending on different styles of devices.
Let me talk about this next viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
Why make the width equal to the width of the viewable area of the device
It refers to a viewport visible region (region that the white display of the page, of course, is generally much screen display device to let areas of the page is much, if the width of the screen is 320px, without providing visible area size of 320px , a 960px page (assuming that the PC end page is 960px so big) abruptly 320px displayed on the screen, the entire page can only be reduced to 1/3 of the original to show that the words on the page the user looks too small.
If the width of the viewable area of the screen is adjusted to the width of the device, it will end 960px PC page on the device will re-layout width of 320px, such as before on the PC side to show the contents of a line, moving end due to the width of only 320px line certainly show no less, so it will be wrapped. After such a layout displays the font size and the PC side is the same, the user experience will be better.
So we need to set the width of the visible area of the width of the device, then there will code for verification.
For the following code
<style>
.container{
margin:0 auto;
max-width:800px;
display: flex;
border:1px solid black;
}
.left{
display: flex;
width: 200px;
background:red;
margin:5px;
}
.right{
display: flex;
flex: 1;
background:blue;
margin:5px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
这里是一些不重要的内容，比如友情链接、广告
</div>
<div class="right">
这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。
</div>
</div>
</body>If not <meta name="viewport" content="width=device-width, initial-scale=1.0" >, the PC side of the page as follows
Page on the iPhonex
Obviously, not carried out on the mobile terminal adapter but has been scaling, resulting in very small fonts, poor user experience.
Coupled with this time <meta name="viewport" content="width=device-width initial-scale=1.0">, the movable end of the page as shown below
The overall scale is not visible, but according to the width of the device has been adapted by line feed mode, this time the font and font size of the PC side is almost a good user experience.
Through <meta name="viewport" content="width=device-width initial-scale=1.0">to mobile end this statement fits some of the more simple case, in the case of mobile terminal adapter is required is relatively low, but if you want to better fit mobile terminal should adopt some other measures, such as media inquiries.
The figure above, the red part of actually moving end can not be displayed because it is not important elements, this time on the way when media queries can be used to hide the red area on the left after the width of the device is smaller than a certain value.
May be added in the above media query css code, when the device is less than the width of the red region hidden 640px left.
@media (max-width: 640px){
.left{
display: none;
}
}In the case of displaying iphonex as shown below:
Let's look at a case:
HTML code:
<div class="container">
<div class="intro">
介绍1
</div>
<div class="intro">
介绍2
</div>
<div class="intro">
介绍3
</div>
<div class="intro">
介绍4
</div>
</div>CSS code
.container{
margin:0 auto;
max-width:800px;
border:1px solid black;
}
.intro{
display: inline-block;
width:180px;
height:180px;
line-height: 180px;
text-align: center;
border-radius: 90px;
border:1px solid red;
margin:7px;
}On the PC side page is shown below:
Without <meta name="viewport" content="width=device-width initial-scale=1.0">the mobile terminal shown below:
You will find the page just been scaling on the basis of the pc side, and now with meta tags,
Will automatically be seen after the addition of meta tags according to the width of the apparatus is adapted, iphone width 5 is 320px, the width of the circle is 182px, margin-left as 7px, plus the right there 7px the margin-right, so add They accounted for a total of 196px, so left 124px, so the second circle only came in the second row.
Now there is a problem on the left too much, and we want it to be centered in the mobile terminal, so the use of media queries, add the following css code.
@media (max-width: 640px) {
.intro {
margin: 7px auto;
display: block;
}
}注意这个地方必须加上 display: block，不加之前是 inline-block，在 inline-block 条件下 auto 是不会起效果的，左右没有 margin 值。
block 元素是会占据一行的，所以 auto 可以居中，向 inline-block 并不会单独占一行，它的宽度是有限的，谈不上 auto。
加上上面的媒体查询之后，当设备宽度小于 640px 时就会圆圈就会居中显示。
现在还有一个问题是由于圆圈的数值是通过 px 单位写死的，所以无论设备的大小如何改变，圆圈的大小是不会改变的，随着设备宽度（小于640px）的变化，圆圈的大小始终是不会变化的。
这样随着设备宽度的增加，圆圈就显得比较小了，那么有没有什么方法可以使得随着设备宽度的增加，圆圈也可以随着增加呢？
可以的，通过 rem 就可以实现。
rem 是一种根据 html 的 font-size 改变动态修改值的相对单位。
我们可以通过设置媒体查询，设置几个设备宽度下不同的 html 的 font-size ，这样当设备宽度变大时，1 rem 的值也随着变大，这样就可以实现圆圈跟着变大了。
这里假设 1rem = 20px
将 css 代码中的 px 变为 rem
.container{
margin:0 auto;
max-width:800px;
border:1px solid black;
}
.intro{
display: inline-block;
width:9rem;
height:9rem;
line-height: 9rem;
text-align: center;
border-radius: 4.5rem;
border:1px solid red;
margin:.3rem;
}
@media (max-width: 375px){
html{
font-size:24px;
}
}
@media (max-width: 320px){
html{
font-size:20px;
}
}
@media (max-width: 640px) {
.intro {
margin: .3rem auto;
display: block;
}
}注意 @media (max-width: 375px) 一定要写在 @media (max-width: 320px) 的前面，否则将会一直应用 @media (max-width: 375px) 的样式，例如 设备的宽度为 220px，这个时候两个都满足，但是由于@media (max-width: 375px) 在后面所以它设置的样式会覆盖前面的样式。
设置完后，当设备宽度为 375 时 html 的 font-size为 24px，此时 1rem = 24px（之前 1rem = 20px）所以圆圈会被放大一些。
通过上图可以看到，圆圈的大小变成了 218*218，不再是之前的 182*182。
Note that sometimes when calculated using pixels rem is not accurate, such as the example I want to make .intro element height of 175 px, due to the 1 rem = 24 px, it is necessary to set up
height = 7.2916666666666666666666666666667remAfter the practical application of generally not less than the decimal point is assumed here to take height = 7.3 remso height should be 7.3 * 24 = 175.2, but in the browser height is equal to the upper and lower frame minus 177.19 175.19 175.2 does not mean, so there will be a little deviation.
So, in place of the pixel accuracy demanding, to be extra careful when using rem.
Finished, if impropriety please correct me oh.
