移动端响应式布局

参考文献

移动端 web 和 PC web 的区别

• PC端布局

一般采用两种方案，一种是 min-width 限制最小的宽度，浏览器宽度小于 min-width 就直接滚动。另外一种呢，就是留白。设置页面一个基础宽度，超出的部分留白。

为了让移动端web能像原生App一样，出现了H5技术，进一步衍生了 Hybird, 虽然比不上 App 性能，但是在热更新 上占有绝对优势，有着原生无法替代的地方。

Hybrid App:

混合模式移动应用,是指介于 Web App（套壳）、Native App（原生）这两者之间的 app ，兼具“ Native App 良好用户交互体验的优势 ”和“ Web App 跨平台开发的优势 ”。

优点

1. 门槛低。只要了解前端三大件，就可以进行开发，不需要掌握 Android、IOS 相关知识。像我在开发中使用的 MUI 框架，再加上与其搭配的 Hbuilder IDE，对 Hybrid App 开发的新手绝对是一个福音。

2. 速度快。如果应用中 HTML、CSS、JS 代码占比极大，那么，写应用界面就和写网页没区别，速度极快。
   跨平台。一套代码搞定多平台，不用为了多个平台而准备多套代码。当然，适配及体验是肯定不如 Native ，但代码写的好的话，其实在主流机型上的适配和体验也都不错。

缺点

1. 拓展难。这就意味着到后期，整个APP的复杂性，和对于多类型业务模块的兼容、信息传递等。开发成本在这个时候，甚至已经大于纯Native应用了。
2. 体验差。Hybrid App 始终不是 Native App 。就目前的技术而言，Hybrid App 在适配、体验及底层调用仍然赶不上 Native App 。大部分 Native App ，其实还是非常依赖底层的，而且包括界面的东西，都是使用原生的API，效率就当然要比 Hybrid App 要好。

解决方案一：媒体查询

/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
复制代码

解决方案二：百分比布局

Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

/* pc width > 1100px */
html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
复制代码

解决方案三：rem布局

REM是CSS3新增的单位，并且移动端的支持度很高。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

rem响应式的布局思想：

• 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
• 高度值可以设置固定值，设计稿有多大，我们就严格有多大
• 所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)
• js获取真实屏幕的宽度（document.body.clientWidth），让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

rem布局的缺点：

在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前。

REM布局也是目前多屏幕适配的最佳方式。默认情况下我们html标签的font-size为16px,我们利用媒体查询，设置在不同设备下的字体大小。

/* pc width > 1100px */
html{ font-size: 100%;} // 这里的字体是16px=1rem
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
复制代码

解决方案四：视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

各个单位具体的含义如下：

vw或者vh很类似百分比单位。vw和%的区别为：

使用视口单位来实现响应式有两种做法：

1.仅使用vw作为CSS单位

• 对于设计稿的尺寸转换为为单位，我们使用Sass函数编译

  //iPhone 6尺寸作为设计稿基准
  $vm_base: 375; 
  @function vw($px) {
      @return ($px / 375) * 100vw;
  }
  复制代码

无论是文本还是布局宽度、间距等都使用vw作为单位

2.搭配vw和rem

图片响应式

图片响应式包括两个方面，一个是大小自适应，让图片在不同的屏幕分辨率下压缩、拉伸；

一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

1. 使用max-width图片自适应

图片自适应意思就是图片能随着容器的大小进行缩放，可以采用如下代码：

img {
    display: inline-block;
    max-width: 100%;
    height: auto; // 等比缩放
}
复制代码

为什么不能用width：100%呢？

因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。

2. 使用srcset

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">
复制代码

如果屏幕的dpi = 1的话则加载1倍图，而dpi = 2则加载2倍图，手机和mac基本上dpi都达到了2以上，这样子对于普通屏幕来说不会浪费流量，而对于视网膜屏来说又有高清的体验。

如果浏览器不支持srcset，则默认加载src里面的图片。

小总结

响应式布局的实现可以通过媒体查询+px,媒体查询+百分比，媒体查询+rem+js,vm/vh,vm/vh +rem这几种方式来实现。

• 媒体查询针对设备进行适配较麻烦，交互体验不友好；

• 百分比计算麻烦；

• rem将css和js耦合在一起；

• css视口兼容性较差。

响应式布局的成型方案

• Flex弹性布局，兼容性较差
• Grid网格布局，兼容性较差
• Columns栅格系统，往往需要依赖某个UI库，如Bootstrap