标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

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

移动端技术选型

1.单独制作移动端页面

• 流式布局（百分比布局）
• flex弹性布局
• less+rem+媒体查询布局
• 混合布局

2.响应式页面兼容移动端

• 媒体查询
• bootstrap

1.移动开发-流式布局

百分比布局

• 盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩

2.移动开发-flex布局

• flex-wrap：flex的项目默认在一条轴线上，不会换行，如果一行放不下，就会缩小项目宽度（就算设置了子元素宽度也没用）
• flex：定义子项目分配剩余空间，用flex表示占多少份数
  
• align-self：控制子项目自己在垂直方向上的对齐方式，可覆盖align-items属性
• order：定义子项目的排列顺序，数值越小，排列越靠前，默认为0

3.移动开发-rem适配布局

页面布局能否随屏幕大小变化而变化？
流式布局和flex布局主要针对于宽度布局，那么高度如何设置？
怎么样让屏幕发生变化时元素高度和宽度等比例缩放？

rem基础

rem单位

rem是一个相对单位，类似于em，em是父元素字体大小(父元素设置font-size=12px;，子元素设置width:2rem;，则换成px表示就是24px)

不同的是rem的基准是相对于html元素的字体大小

比如，根元素(html)设置font-size=12px;，非根元素设置width:2rem;，则换成px表示就是24px

rem的优点

可以通过修改html的文字大小来改变页面中元素的大小

如何根据屏幕大小动态修改html中文字大小

媒体查询

Media Query

• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同屏幕尺寸设置不同的样式

语法规范

 @media mediaType and|not|only (media feature) {
   css code;
 }

mediaType代表设备类型，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度(必须放在小括号里)

• mediaType 媒体类型
  值：
  • all 用于所有设备
  • print 用于打印机和打印预览
  • screen 用于电脑屏幕、平板电脑、智能手机
• 关键字
  • and：可以将多个媒体特性连接到一起，相当于“且”的意思
  • not：排除某个媒体类型，相当于“非“的意思，可以省略
  • only：指定某个特定的媒体类型，可以省略

！书写顺序宽度从小到大更好

引入资源

当样式比较多的时候，我们可以不同的媒体使用不同的样式表。
直接在link标签中判断设备的尺寸，然后引用不同的css文件

<link rel="stylesheet" href="./style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="./style640.css" media="screen and (min-width: 640px)">

动态设置html标签的font-size大小

我们把屏幕的尺寸划分为相等的份数，例如现在屏幕尺寸为750px，划分份数我们定为15等份，那么html标签的font-size大小就设置成50px，如果屏幕尺寸是320px，那么html标签的font-size大小就设置成21.33px

计算rem公式

rem = 页面元素的px / html字体大小，注意最后单位会取第一个单位
例如：height: (88rem / 50);所以这里单位写rem

rem适配技术方案

• 技术方案1
  • less
  • 媒体查询
  • rem
    采取单独制作移动页面方案，以750px设计尺寸为例：

设置公共common.less文件

在公共common.less文件中设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小
划分份数定为15等份

在index.less中导入common.less文件

@import "common"
（@import导入 把一个样式文件导入到另一个样式文件里）
（link 把一个样式文件引入到html页面里面）

• 技术方案2
  • flexible.js
  • rem

rem适配方案flexible.js

它的原理是将当前设备划分为10等份，我们只需要确定好当前设备的html文字大小就可以
比如设计稿时750px，那么我们只需要把html文字大小设置为75px就可以

4.移动开发-响应式布局

响应式开发原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

设备划分 尺寸区间

超小屏幕(手机) < 768px

小屏设备(平板) >=768px ~ <992px

中等屏幕(桌面显示器) >=992px ~ <1200px

宽屏设备(大桌面显示器) >=1200px

响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素实现变化效果
原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

常见的响应式尺寸划分：
超小屏幕(手机，小于768px)：设置宽度为100%

小屏幕(平板，大于等于768px)：设置宽度为750px

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

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

bootstrap

bootstrap帮我们将布局容器写好了，我们并不再需要去书写媒体查询代码来改变布局容器的宽度

在不同设备下，需要改变布局容器里的内容时再用媒体查询即可