移动端布局的一些建议？

Question

emmm，如果问题蠢了一点，还请多包涵~条件：假设设计图的尺寸为750px1、使用flexible布局，计算各个元素相对于设计图的尺寸设置大小整个页面自适应性很好，随着移动设备屏幕尺寸变化而变化，完全复原设计稿2、设置这样不也是自适应吗？比第1种办法差在哪里？3、啥也不用，就和PC端开发没什么区别，使用px作为单位，这种做法是不是因为自适应差，所以不适用呢？请问大家最常用的是什么适配方案？

Answer 1

一般设置可以设置为1、2、布局通用的话一般会使用rem来全部布局，rem布局相对于body主设置来全局调整的，3、或者使用vm或者vh比例布局

使用非固定像素来定义网页内容，也就是百分比布局，(特别适合于电商网站的布局)通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。

Answer 2

建议使用响应式布局：

简而言之，就是一个网站能够兼容多个终端。

CSS3中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽

度区间的网页布局。它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/}

如下所示：

@media screen and (width: 320px){
          body {
              background-color:red          }}
@media screen and (width: 375px){
          body {
              background-color:green          }}

由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap来完成一部分工作，当然也可以自己写响应式。

bootstrap中常用类名：

.col-xs-*超小屏幕（移动设备） 768px以下

.col-sm-*小屏设备 768px-992px

.col-md-*中等屏幕 992px-1200px

.col-lg-*宽屏设备 1200px 以上