移动端响应式布局

为什么要做移动端的响应式布局

相信各位朋友都知道手机设备的屏幕尺寸标准有很多种，当我们需要开发一个移动端APP时，就要考虑各种屏幕的兼容性，正因为有这个问题，所以需要做一个响应式的布局

响应式布局的第一种方法—用rem+媒体查询

首先先介绍一下rem与媒体查询

rem

rem是单位的一种，css常用的单位有px、em、rem
比较三个单位的不同点可以参考此处链接px、em、rem对比地址

媒体查询

用官方定义媒体查询的话术就是：

@media 可以针对不同的屏幕尺寸设置不同的样式。
当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
例如：

html {
    font-size: 50px;
}
@num: 15;
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @num;
    }
}
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @num;
    }
}

在这里我就当你已经知道了rem的概念以及less的变量和运算
这里设置的含义就是正常情况下 html 的字体大小是50px，当小于750px，大于320px时，html 默认的字体大小就是320/15=21.33px

又因为rem是根据根元素的字体大小，来相对的确认自己的文字大小

示例

当有如下情况时：

  input {
    height: 1rem;
  }

这里input高度实际上是取决于屏幕尺寸的大小：
当屏幕宽度尺寸大于320px，小于750px时，采用的是21.33px大小
当屏幕宽度尺寸大于750px时，采用的是50px大小
这也就是第一种响应式布局的原理了