移动端

为什么使用移动端适配？

1.随着时代的发展，在移动端上访问pc端的页面，逐渐常态化
2.手机的设备尺寸，碎片化(种类繁多，五花八门)越来越严重

视口

三种视口：布局视口，视觉视口和理想视口
布局视口

布局视口一般都是浏览器厂商给的一个固定值，布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。

视觉视口

浏览器可视区域的大小，也就是用户可以通过设备宽度看到的内容

理想视口

布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了手机本身的尺寸。
所以苹果引入了理想视口，它对设备来说是最理想的布局视口，
用户不需要对页面进行缩放就能完美的显示整个页面。
最简单的做法就是使布局视口宽度改成屏幕的宽度。

两个像素和一个像素比

1)css像素(独立像素,逻辑像素) : 在CSS、JS中使用的一个长度单位。单位px
注：在pc端1物理像素等于1px，但是移动端1物理像素不一定等于1px
2)物理像素：屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。
任何设备屏幕的物理像素出厂时就确定了，且固定不变的
设备像素比： 简称为dpr， 它是物理像素和独立像素的对应关系(也就是比例)
备注：判断是否为高清时， 看一下dpr的值是否大于1。 一般情况下dpr为整数，

meta标签

告诉浏览器一些设置信息，是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配
五个指令:1.width 设置布局视口的宽度，一般为device-width
2.initial-scale 初始缩放比例
3.maximum-scale 最大缩放比例
4.minimum-scale 最小缩放比例
5.user-scalable 是否允许用户缩放

代码：

移动端测试方式

1.谷歌浏览器提供的虚拟机
2.电脑和手机再同一局域网内，扫描编译器提供的二维码，即可在手机查看
3.搭建本地服务器，来建立访问

移动端开发

响应式布局

用于解决不同浏览器，不同分辨率以及不同设备不同效果
1.内容没有受到明显影响时，自适应宽高即可
2.内容受到明显影响时，改变布局，来保证内容的清晰
优点：1.面对不同分辨率的设备灵活性很强
   2.能够快捷的解决多设备显示适应的问题
缺点：1.兼容各种设备，工作量大，效率低，页面加载时间长
   2.一定程度上，会改变网站原有的布局结构，可能会出现用户混淆问题

单独制作移动端的页面

@media 声明关键字
screen 设备类型
and 关键字(连接,指定)
() 媒体特性(屏幕尺寸)
{} 指定的样式
当screen的屏幕尺寸符合指定尺寸时，执行指定的样式
max-width:屏幕小于等于指定尺寸时触发(最多)
min-width:屏幕大于等于指定尺寸时触发(最小)

rem和em

em

是一个相对的距离单位
1em == 父级1*font-size em会通过自身父级的大小，转换为px
优点：方便我们设置段落间隙
缺点：当嵌套多层时，需要自己计算

rem

rem与em基本类似
区别点在于em相对的是自身父级的字体大小，rem相对的是html的字体大小
rem:root-em根元素的em值，html的字体大小
rem计算公式：
屏幕宽度/份数=html字体大小(1rem的大小)
onresize 屏幕尺寸发生变化时触发
获取屏幕宽度：document.documentElement.clientWidth/document.body.clientWidth
一些浏览器无法获取documentElement，所以去获取body