移动端自适应

移动端自适应

方案：

• 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案
• 使用 flexbox 解决方案
• 使用百分比加媒体查询
• 使用 rem

1. 关键位置宽高和位置不变，只有容器元素在做伸缩变换。

   开发原则：
   文字流失，空间弹性，图片等比缩放
   是 rem 布局的基础

2. 在 dom ready 以后，通过以下代码设置 html 的 font-size

document.documentElement.style.fontSize =
  document.documentElement.clientWidth / 6.4 + "px";

3. 设置 viewport

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是 device-width

4. rem 是相对于 body 根元素的 fontSize 设置的大小来自动匹配的
   那么问题来了，这个 fontSize 是怎么设置的

一般设计稿给的大小是 375px，我们要根据屏幕的宽度自动设置 fontSize 的大小，怎么计算呢，计算的规则是怎么样的

// rem.js
(function (doc, win) {
  var prem = 16; //fontSize   16？  为了尽量不破坏ionic ui的样式

  var pwidth = 375; //设计稿宽度

  var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth;

      if (!clientWidth) return;

      docEl.style.fontSize = prem * (clientWidth / pwidth) + "px";
    };

  if (!doc.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

5. 布局用 rem em vh vw 单位可以用来进行适配，

rem 以根元素的字体大小来进行适配。
em 以父元素的字体大小来进行适配。
vh 当前屏幕可见高度的%。
vw 当前屏幕可见宽度的%

6. 响应式布局
   一个网站能够兼容多个终端

/* 当浏览器的可视区域小于980px */
@media screen and (max-width: 980px) {
  #wrap {
    width: 90%;
    margin: 0 auto;
  }
  #content {
    width: 60%;
    padding: 5%;
  }
  #sidebar {
    width: 30%;
  }
  #footer {
    padding: 8% 5%;
    margin-bottom: 10px;
  }
}
/* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
  #header {
    height: auto;
  }
  #searchform {
    position: absolute;
    top: 5px;
    right: 0;
  }
  #content {
    width: auto;
    float: none;
    margin: 20px 0;
  }
  #sidebar {
    width: 100%;
    float: none;
    margin: 0;
  }
}

7. 图片响应式
   这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

1.使用 max-width（图片自适应）:
图片自适应意思就是图片能随着容器的大小进行缩放

2.使用 srcset   

3.使用 background-image

4.使用 picture 标签

CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整，媒体查询由两部分组分，一个可选的媒体类型，以及若干个css表达式。当媒体类型判断为true时，其中的css表达式被解析。如果媒体查询应用在link中，即使判断结果为flase，样式同样被下载，但是不会应用。
1、媒体类型

• all 使用所有的设备
• print 适用于打印用纸或打印预览视图
• screen 主要用于电脑、手机、平板等智能设备屏幕
• speech 适用于语音合成器

2、逻辑运算符

• and 并且，将两个表达式合二为一
• not 除了
• only 仅仅

<link rel="stylesheet" media="only screen and (color)" href="example.css">

3、媒体特性
绝大多数媒体特性都可以使用"min-"or"max-"修饰，表示最小条件和最大约束

• color
  表示颜色设备，如果是非色彩设备，color为0，取值为颜色组件的比特数

 @media all and (min-color:4) {
            ...
        }

• device-height/device-width
  描述输出设备的高度和宽度（意味整个屏幕或页面，而不仅仅是呈现区域，比如文件窗口）

  <link rel="stylesheet" media="screen and (max-device-height:799px)"
   href="example.css">

• height/width
  高度媒体特性描述了输出设备的呈现表面的高度/宽度（例如窗口的高度或打印机的页面框）

4、响应式媒体尺寸
小于720px 手机
720~1024px ipad
大于1024px pc**