移动端(视口、像素和rem)

meta标签： 告诉浏览器视口设置信息，是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口尺寸相匹配
其有五个具体的指令：

• width 设置布局视口宽度(一般都是device-width设备宽度)
• initial-scale 最初缩放比例
• maximum 最大缩放比例
• minimum 最小缩放比例
• user-scalable 是否允许用户缩放

<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
三种视口：

• 布局视口 ：布局视口一般都是浏览器厂商给的一个固定值，布局视口是看不见的（浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内）
• 视觉视口 ：浏览器可视区域的大小，也就是用户可以通过设备看到的内容
• 理想视口 ： 布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了手机本身的尺寸。所以苹果引入了理想视口，它对设备来说是最理想的布局视口，使得用户不需要对页面进行缩放就能完美的显示整个页面。最简单的做法就是使布局视口宽度改成屏幕的宽度。

像素：

• css像素(独立像素/逻辑像素)：在CSS、JS中使用的长度单位，单位为px
  （在pc端，1物理像素 = 1px，但是移动端，1物理像素 != 1px）
• 物理像素：屏幕的物理像素，又称为设备像素，是显示器的配件

设备像素比（dpr）：
物理像素与独立像素的比例（可通过window.devicePixelRatio获取）

可以用来判断是否为高清，如果大于1则为高清，一般dpr为整数

使用移动端适配的原因： 在移动端访问PC端页面逐渐变得常态化，手机尺寸规格型号越来越多

移动端测试方式：

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

---

移动端开发的主流方案：

• 单独制作移动端布局
• 响应式布局

响应式布局

用于解决不同浏览器,不同分辨率以及不同设备的不同显示效果
特点：

1. 内容没有受到明显影响时，自适应宽高即可
2. 内容受到明显的影响时，改变布局，来保证内容的清晰

优点:

1. 面对不同分辨率的设备灵活性很强
2. 能够快捷解决多设备显示适应的问题

缺点:

1. 兼容各种设备工作量大，效率低，页面加载时间长
2. 一定程度上，会改变网站原有的布局结构，可能会出现用户混淆问题

使用方法：

@media: 声明关键字
screen：设备的类型
and : 关键字 (连接，指定)
() : 媒体特性(就是屏幕尺寸)

当 screen的屏幕尺寸 符合 指定的尺寸时， 执行指定的样式
max-width: 屏幕小于等于指定尺寸时 触发 (最多)
min-width: 屏幕大于等于指定尺寸时 触发 (最少)

{} ： 指定的样式
内联式：
@media only screen and (min-width: 1200px) and (max-width: 1440px) {符合条件时的css样式}
外联式：
<link rel="stylesheet" href="three.css" media="screen and (max-width:800px) and (min-width:500px)">

---

rem

em：相对距离单位，通过自身父级字体大小转换为px（参考对象为父级的font-size。1rem = 父级的1*font-size）

• 优点： 方便我们设置段落间隙
• 缺点： 当嵌套多层的时候，需要自己去计算

rem：相对距离单位（参考对象为html的字体大小）
rem 计算公式：

1. 屏幕的宽度(设计稿 通常是750) / 份数(20) = html的字体大小(1rem的大小)
2. 元素的尺寸 / 1rem的值 = 实际的rem值(要写在元素样式上的值)

设置rem：
window.onresize = function (ev) {
    //一些浏览器中，无法获取到documentElement, 所以去获取body
    var htmlWidth = document.documentElement.clientWidth||document.body.clientWidth;
    //获取html 便于下面设置html的字体大小
    var html = document.querySelector("html");
	//设置根元素的字体大小
    html.style.fontSize = htmlWidth / 20 +'px';
}

通过rem和em，来实现更加灵活的页面布局