前端页面布局

前端页面布局

一、固定布局
即页面固定宽度，早期部分网站会把页面设置成320的宽度，可以达到前端以及页面视觉想要的效果。缺点是部分大屏幕手机会有两边留白，以及部分手机上的页面特别小，按钮等也特别小，影响用户体验。

二、流式布局
即宽度使用百分比，高度使用固定值的页面。优点是可以使所有屏幕都适配，但是显示的效果很不好。页面会被拉宽，只有几款尺寸的手机可以完美显示出ui设计师想要的效果。

三、使用viewpoint进行缩放

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

以320宽度为基础，进行缩放，最大缩放1.3倍，即为320*1.3=416，简单粗暴，不过有些页面可能会糊。但是也很高效了。

四、rem布局
rem布局能等比例适配所有屏幕，rem通过根目录进行适配。

html{
  font-size: 14px;
}

接下来的1rem即相当于14px，需要适配的时候修改html的font-size大小值即可。
不同分辨率下可以通过js去动态计算html（根目录）下的font-size值，即所有屏幕分辨率都可适配。也可统计网站访问有哪些需要适配的屏幕，即可媒体查询。

html {
  font-size : 14px;
}
@media only screen and (min-width: 401px){
  html {
    font-size: 17.5px !important;
  }
}
@media only screen and (min-width: 428px){
  html {
    font-size: 18.7px !important;
  }
}
@media only screen and (min-width: 481px){
  html {
    font-size: 21px !important;
  }
}
@media only screen and (min-width: 569px){
  html {
    font-size: 24.9px !important;
  }
}
@media only screen and (min-width: 641px){
  html {
    font-size: 28px !important;
  }
}