移动端自适应

下面介绍一些有关移动端自适应的一些概念。

1. 什么是Viewport?

​ 手机浏览器会把页面放入到一个虚拟的“视口”（viewport）中，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。通常这个虚拟的“视口”（viewport）比屏幕宽，会把网页挤到一个很小的窗口。如果不显示地设置viewport，那么浏览器就会把width默认设置为980。但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。然后浏览器引进了 viewport这个 meta tag，让网页开发者来控制 viewport的大小和缩放。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

meta viewport 的6个属性:

• width ： 设置viewport的宽度
• height： 设置viewport的高度
• initial-scale ： 设置页面的初始缩放值
• minimum-scale ：允许用户的最小缩放值
• maximum-scale：允许用户的最大缩放值
• user-scalable： 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许,一般设置为no

特殊说明：（IE6,7,8）支持，需要使用css3mediaqueries.js

<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

2. rem和em的区别？

rem和em在做移动端自适应非常的重要，它们都是相对单位

1. em (相对父级)

   例如: 父节点字体大小16px,子节点设置字体大小为1.25em,子节点字体大小转化为像素为 1.25 x 16 = 20

   2. rem(相对根节点)

   例如: 根节点字体大小16px,任一节点设置字体大小为1.25rem,节点字体大小转化为像素为 1.25 x 16 = 20

3. 物理像素、设备像素、逻辑像素、CSS像素

设备像素 = 物理像素 ， 设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。

1. css像素

   css像素是css样式表语言中用来表示长度的一个单位，单位是px。

2. 设备像素（DP device pixels）

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

3. 逻辑像素（ logic point ）

逻辑像素的单位是PT，它是按照内容的尺寸计算的单位。比如iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍，即1pt=2px，那么其实iPhone 4的物理像素是960x640px。

主要介绍了vue移动端自适应，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习 价值，需要的朋友们一起来学习学习吧

方案一:直接引入js （自己 写的动态改变fontsize的js）

function htRem () {
  var ww = document.documentElement.clientWidth;
  if (ww > 750) {
    ww = 750;
  }
  document.documentElement.style.fontSize = ww / 7.5 + "px";
}
htRem();
window.onresize = function () {
  htRem();
};

在main.js中import引入即可

方案二:使用插件

1. 安装依赖

cnpm install lib-flexible postcss-pxtorem --save-dev
//或

npm install lib-flexible --save
npm install postcss postcss-pxtorem --save-dev

2. main.js导入

// 移动端适配
 import ‘lib-flexible/flexible’; 

3. 创建.postcssrc.js并配置

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },//这样当遇到vant组件，rootValue值为37.5，而其他我们自己的样式文件rootValue值为75
      propList: ['*']
    }
  }
}

4. 按照上面的步骤写完后，使用时设计图750px的，那设计图要是300px的宽度，那代码里面写成300px。这样就可以了
5. postcss-pxtorem切换版本
   当进行项目启动，会发现报错，查了原因可能是版本不匹配。
   所以切换postcss-pxtorem的版本

npm i postcss-pxtorem@5.1.1 --save-dev

注意

1. 不使用行内样式
   对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。

2. 字号不使用rem
   我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询

.item {
      border-bottom: 1PX #8d8d8d dashed;
      font-size: 12PX;
      line-height: 16PX;
      @media screen and (min-width: 576PX) {
        font-size: 14PX;
        line-height: 18PX;
      }
	  @media screen and (min-width: 768PX) {
        font-size: 16PX;
        line-height: 28PX;
      }
      @media screen and (min-width: 992PX) {
        font-size: 16PX;
        line-height: 32PX;
      }
      @media screen and (min-width: 1200PX) {
        font-size: 18PX;
        line-height: 64PX;
      }   
} 

vm适配

1. 安装依赖

npm install postcss-px-to-viewport -D

2. 在根目录下新建 .postcssrc.js 文件

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
}

3. 保存文件后我们重启项目即可
   当然啦，前面的都是建立在没有进行rem的适配，如果你的项目进行了rem 的适配我们需要在做如下操作：
   main.js 文件中删除如下代码

import "lib-flexible/flexible";

package.json 文件中删除如下代码

"lib-flexible": "^0.3.2",
"postcss-plugin-px2rem": "^0.8.1",

重启项目

      上篇博客讲到了移动端的常用布局模式之一：Flex布局，这篇博客咱们来了解一下移动端的另外两种布局——移动端自适应布局和响应式页面兼容移动端布局。

目录

一、移动端自适应布局

1.rem

什么是rem

rem布局原理

2.媒体查询

查询类选   (mediatype)

关键字

媒体特征（media feature）

媒体查询语法

3.less

变量（Variables）

嵌套（Nesting）

运算（Operations）

注释（Comments）

导入（Importing）

4.rem适配方案

二、响应式页面兼容移动端布局

1.媒体查询

2.Bootstrap

平均分的类前缀

列嵌套

列偏移

列排序​

​响应式工具

3.bootstrap组件的使用方法

---

一、移动端自适应布局

        所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度，一种是使用rem自适应布局的flexible.js。

1.rem

• 什么是rem

        rem和我们之前学过的em一样，都是css中的单位，并且都是相对单位。我们知道，em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小。而rem单位是基于html中元素的字体大小。

        了解到rem是什么之后，我们再来了解一下rem的布局原理。 

• rem布局原理

        其实rem布局的本质是等比缩放，一般是基于宽度，当我们的屏幕变小了，如果里面的内容也会跟着等比例缩小，那么就可以实现在不同的屏幕大小呈现相同的效果，这不正是我们所希望的吗？

        假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比。

p {width: 50x} /* 屏幕宽度的50% */ 

        当屏幕缩小时，p占的宽度也在相应的减小，在css并没有x这样神奇的单位，但我们可以通过rem作为桥梁，来实现这样的效果。我们发现，如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生变化，达到整体控制的效果。

2.媒体查询

        我们可以通过rem来实现在不同屏幕下控制页面元素等比例缩放，那么问题又来了，我们怎么来识别此时的屏幕大小呢？通过什么方式识别呢？那么在这里就引入我们自适应布局的第二个知识点——媒体查询。

        使用 @media 查询，可以针对不同的媒体类型定义不同的样式。也可以针对不同的屏幕尺寸设置不同的样式，在制作响应式布局时，媒体查询也会有很大的用处。

        在重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

• 查询类选   (mediatype)

1. all 用于所以设备

2. print 用于打印机和打印预览
3. screen 用于电脑屏幕，平板电脑，智能手机等

• 关键字

关键字：将媒体类型或多个媒体特征连接到一起作为媒体查询的条件

1. and 将多个媒体特征连接到一起，相当于”且“
2. not 排除某个媒体特征 相当于”非“ 可以省略
3. only 指定某个特定的媒体类型 可以省略

• 媒体特征（media feature）

1. width 定义输出设备中页面可见区域的宽度

2. min-width 定义输出设备中页面最小可见区域的宽度

3. max-width 定义输出设备中页面最大可见区域的宽度 

• 媒体查询语法

   @media mediatype and|not|only (media feature) {
           CSS-Code;
        }

注：

1. 用@media开头
2. mediatype 媒体类型
3. 关键字 and not only
4. media feature 媒体特性，必须用小括号包含
5. 多个区间建议从小到大或者从大到小，注意CSS的层叠性，相同属性执行就近原则。

        了解完媒体查询的基本用法之后，我们可以通过该方法划分区间，实现在不同屏幕中元素大小发生改变的效果。

/*该案例实现了在不同大小下屏幕呈现不同的背景颜色*/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询案例</title>
    <style>
        div {
            height: 100px;
            background-color: green;
        }

        @media screen and (max-width:1200px) {
            div {
                background-color: blue;
            }
        }

        @media screen and (max-width:992px) {
            div {
                background-color: red;
            }
        }

        @media screen and (max-width:768px) {
            div {
                background-color: pink;
            }
        }

        body {
            width: 100%;
            min-width: 500px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果图如下：

         可以看到在不同的区间有不同的背景颜色，实现了我们理想中的效果。

3.less

        解决了如何区分屏幕大小后，那么问题又来了，我们使用rem单位进行布局时，需要将px单位转换为rem单位，简单的转换我们能够很快计算出来，那复杂的呢？这么看起来rem单位使用起来好像更加复杂了。

        于是，在这里介绍一种新语言——less。less是一门向后兼容的 CSS 扩展语言，为CSS添加了一些新的功能。

• 变量（Variables）

        当我们页面中多次使用某一个值且希望更改时达到同时变更的效果，我们将这个值定为一个变量。通过例子来理解。

@width: 10px;
@height: @width + 10px;

header {
  width: @width;
  height: @height;
}

该段代码编译成css文件为：

header {
  width: 10px;
  height: 20px;
}

        当我们想要更改页面中所有width的大小时，直接更改@width后面的数值即可。

• 嵌套（Nesting）

        Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。子元素的样式我们可以直接书写在父元素中。

        注意：如果遇见（交集、伪类、伪元素选择器）需要加&符号

假设我们有如下CSS代码：

header {
  color: black;
}
header .navigation {
  font-size: 12px;
}
header .logo {
  width: 300px;
}
header .logo:hover{
  width:400px;
}

使用less书写为：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
  .logo&:hover{
    width:400px;
  }

}

        使用less嵌套的话可以让代码逻辑更清晰，也更加简洁。  

• 运算（Operations）

        在CSS里面不能进行计算，于是在less中引入了运算。在less中可以进行+、-、*、/的运算。可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。注意运算符左右需要用空格隔开。

// 所有操作数被转换成相同的单位 并以最左侧单位为最终单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm 

// conversion is impossible 无效的单位换算
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

        乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

        还可以对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

        less运算可以大大减少在css中的计算量。

• 注释（Comments）

        在less中行注释和块注释都可以使用   //   和   /*   */   这两种方式。

• 导入（Importing）

        当我们需要在less文件中导入另一个文件时，我们使用@import进行导入。当导入文件为.less格式时，可以省略后缀名。

@import "library"; // library.less
@import "typo.css";

4.rem适配方案

        至此，我们已经了解了自适应布局的核心内容。当我们使用rem进行布局时，有两种适配方案。

• less+媒体查询+rem布局

        该方法的使用思路是利用媒体查询划出屏幕区间，设置在不同的区间下，根元素的大小不同，实现元素在不同屏幕下的缩放。我们可以为想要划分的份数定义一个变量，而屏幕宽度 / 划分的份数 就是根元素的font-size值。

• flexible.js+rem

        rem的另一种适配方案就是搭配js使用，引入flexble.js文件，可以不适用媒体查询。flexble.js是将我们当前屏幕平均分成10份。另外在vs code里面有一个插件可以直接将px单位转为相应的rem单位，但是需要根据每次的设计稿更改根元素的font-size，一般我们以750px的设计稿为准。

---

        总结：我们移动端响应式布局主要分为流式布局（百分比布局）、flex伸缩布局和rem布局，我们布局的核心思想是选取其中一种布局方式为主，其他方式为辅助布局。

二、响应式页面兼容移动端布局

        我们之前学习的布局方式是将移动端和pc端分别进行布局的，而响应式页面兼容移动端布局是将pc端和移动端都用一套样式文件，不用另外书写移动端的样式。该方法书写起来需要注意更多的细节，所以在移动端布局时，主流方式还是采取流式布局、flex伸缩布局或者rem布局中的一种。

1.媒体查询

        在本方法中，我们也需要通过媒体查询来识别当前屏幕大小，对不同宽度的设备进行布局和样式的设置，从而适配不同设备。

设备的划分情况：

• 小于768的为超小屏幕（手机）

• 768~992之间的为小屏设备（平板）

• 992~1200的中等屏幕（桌面显示器）

• 大于1200的宽屏设备（大桌面显示器）

          我们可以使用一个父级作为容器，来配合子级元素来实现变化效果。我们通过媒体查询改变父容器大小，再改变里面子元素的大小和排列方式，以此来达到我们的目的。

父容器版心的尺寸划分如下：

• 超小屏幕（手机，小于 768px）：设置宽度为 100%

• 小屏幕（平板，大于等于 768px）：设置宽度为 750px

• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px

• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

我们也可以根据实际情况进行划分。

2.Bootstrap

        Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。        

• Bootstrap的优点

1. 标准化的html+css编码规范
2. 提供了一套简洁、直观、强悍的组件
3. 有自己的生态圈，不断地更新迭代
4. 让开发更简单，提高了开发的效率

• 使用四步曲

     1.创建文件夹结构    2.创建html骨架结构  3.引入相关样式文件 4.书写内容

• container容器  

        在bootstrap中，为我们提供了两种container容器。

1. container类 响应式布局容器
2. container-fluid类 流式布局容器

• 栅格系统

        bootstrap的官方描述为：Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

        简单来讲，就是bootstrap将我们的页面平均分为12份，并且bootstrap执行的是移动设备优先的策略，是从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。而bootstrap是通过行与列的概念进行布局的。

平均分的类前缀

        bootstrap将不同的屏幕尺寸的屏幕用不同的类名表示：        

•     小于768px  container最大宽度100%  ：clo-xs-份数
•     大于等于768px container最大宽度750px  ： clo-sm-份数
•     大于等于992px：container最大宽度970px ：.col-md-份数
•     大于等于1200px：container最大宽度1170px ：.col-lg-份数

    注意点：
        1.每一列默认有左右15px的内边距。
        2.可以为一列同时指定多个设备的类名，实现响应式布局。例如 class="col-md-4 col-sm-6"可以实现在中屏幕下该区域占4份，在小屏幕下占6份。

列嵌套

        在列嵌套时最好加一个行row，可以取消父元素的padding值，高度和父级一样高

<!-- 列嵌套 -->
 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移

        在栅格系统中，我们想要盒子与盒子之间有间隙，在container容器的12份没被瓜分完时，我们可以使用offset类，让盒子进行偏移。其原理就是给盒子加上一个左外边距，系统会根据当前屏幕的大小自动计算这个外边距的值。

<!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

列排序

        当我们在开发中遇到想要给两边的盒子交换排列顺序时，我们可以使用push类和pull类。
    .col-md-push  
    .col-md-pull 将右侧盒子拉到左边

<!-- 列排序 -->
  <div class="row">
      <!-- 将左侧盒子推到右边 -->
      <div class="col-lg-4 col-lg-push-8">左侧</div> 
      <!-- 将右侧盒子拉到左边 -->
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

排序前：

排序后：

响应式工具

         该工具能够帮助我们在不同的屏幕下对元素做一些隐藏和显示效果。

         使用hidde隐藏元素，使用visible显示元素。

3.bootstrap组件的使用方法

        在bootstrap官网中下载版本，在官网中有相应的css样式文档，还有一些组件，在样式文件中找到我们需要的部分，在我们的项目中引入的bootstrap的相关样式后，我们就可以将该部分的样式复制到我们的html代码中，再修改细节就可以了。

        中文网  官网

        注意：下载的版本、引入的版本和查询的相关样式版本需一致。

---

        至此，移动端的常用布局都有所了解了，后面的就需要通过练习来加深印象，巩固学习。

        希望本篇分享对前端学习的各位有所帮助，若有错误，希望留言指出~