移动端：
一、应用范围
普通网站：app内嵌网页，轻应用，公众号，小程序
二、相关设置
（1）宽度：
1.视口宽度：每个浏览器有一个默认宽度，980px
width=device-width:视口宽度等于设备宽度
2.设备宽度：
initial-scale=1.0:默认内容缩放比例 1.0
user-scalable=no 不允许用户缩放
minimum-scale=0.5 最小缩放范围
maximum-scale=4 最大缩放范围
3.viewport：视口宽度的相关设置
4.meta：元信息（模块）
5.模拟器使用：
shift+拖拽：缩放网页
shift+滚轮：左右滚动网页
滚轮：上下滚动网页
Responsive：自由设置设备大小
三、移动端布局——方法
1.固定布局（不好看）
类似于PC，绝大部分大小单位都是px
适应：内容放中间，两边留白
2.流式布局
百分比
弹性盒
一般宽度百分比自适应，高度不变
3.响应式布局
宽高都能自适应
布局随宽高变化而变化
不适用于具有大量内容的网页网站
bootstrap
不适用于具有大量内容的网页网站
4.rem布局
流式布局的进阶
基于百分比布局而来的
多种布局方式结合使用
四、媒体
（1）媒体查询：媒体设备
根据不同的媒体类型做不同样式布局
（2）媒体类型：
print:打印机
screen:平板、手机、电脑
speech:阅读器
all:以上所有
（3）使用格式：
1. style
@media 媒体类型 and （媒体特征）{
样式
}
位置：style里面，css文件中，引入css文件的Link语句中
2.css文件
引入link：
在link里补充 ： media="类型（特征）"
（4）媒体特征
1.可视区域
width | min-width | max-width
height | min-height | max-height
例子：
eg:@media screen and(min-width:500px) and {max-width:800px}{
div{
color:blue;
}
}
解释：当可视区域宽度大于500px,小于800px时，字体颜色为蓝色
2.设备的宽高
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
eg:@media screen and(min-device-width:500px) and {max-width:800px}{
div{
color:red;
}
}
解释：当设备宽度大于500px,小于800px时，字体颜色为红色
3.可视区域的宽高比
aspect-ratio | min-aspect-ratio |max-aspect-ratio
eg:
@media screen and (aspect-ratio:1/1){
div{
color:yellow;
}
}
解释：当可视区域的宽高比等于1时，字体颜色为黄色
注意：不能写小数，1/1可以等于2/2等于100/100
4.横竖屏
orientation : landscape（横屏） | portrait（竖屏）
eg:
@media screen and (orientation:landscape){
div{
color:pink
}
}
解释：当设备横屏时，字体颜色为粉色
5.连接词
and 两种情况都满足
not 排除
only 只有
注意：not 和 only 只针对设备类型，不可以适用于媒体特征，不写连接词 时，默认是only
五、rem布局
（1）思路
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
html{
font-size:100/设计稿的总宽度*设备的宽度
}
px=rem
1px=1/100 rem
（2）rem布局实现步骤
设置页面的viewport
动态计算并设置html的fontsize值
按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）
（3）js脚本