开发移动端页面

一、像素 - 什么是像素

在web前端开发领域，像素有以下两层含义：

1. 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。

2. CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。

总结

1. web前端领域，像素分为设备像素和CSS像素

2. 一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。

二、移动端的三个视口

布局视口：移动端CSS布局的依据视口，即CSS布局会根据布局视口来计算。

可以通过以下JavaScript代码获取布局视口的宽度和高度：

1. document.documentElement.clientWidth

2. document.documentElement.clientHeight

第二个视口：视觉视口

能看到的部分就是视觉视口

第三个视口：理想视口

理想视口，这是我们最需要关注的视口，现在我们来回顾一下我们知道了哪些视口，有两个，分别是：布局视口，视觉视口。

手机浏览器要把布局视口设为理想视口：

1. <meta name="viewport" content="width=device-width" />

上面那段代码告诉浏览器：将布局视口的宽度设为理想视口。

移动端的三个视口介绍完了，让我们总结一下：

1. 在PC端，布局视口就是浏览器窗口

2. 在移动端，视口被分为两个：布局视口、视觉视口。

3. 移动端还有一个理想视口，它是布局视口的理想尺寸，即理想的布局视口。（注：理想视口的尺寸因设备和浏览器的不同而不同，但这对于我们来说无所谓）

4. 可以将布局视口的宽度设为理想视口

三、设备像素比(DPR)

1. 设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

1. iPhone5的理想视口是：320*568 <==> device-width = 320，device-height = 568

2. iPhone5的设备像素比：2

设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

缩放：缩小放大的是 CSS像素。

meta视口标签存在的主要目的是为了让布局视口和理想视口的宽度匹配

共有5个：

1. width：设置布局视口的宽

2. init-scale：设置页面的初始缩放程度

3. minimum-scale：设置了页面最小缩放程度

4. maximum-scale：设置了页面最大缩放程度

5. user-scalable：是否允许用户对页面进行缩放操作

媒体查询是响应式设计的基础，他有以下三点作用：

1. 检测媒体的类型，比如 screen，tv等

2. 检测布局视口的特性，比如视口的宽高分辨率等

3. 特性相关查询，比如检测浏览器是否支持某某特性（这一点不讨论，因为它被目前浏览器支持的功能对于web开发来讲很无用）

css中使用媒体查询的语法：

     @media 媒体类型 and (视口特性阀值){   

          // 满足条件的css样式代码

     }

适应所有的设备，我们应该用javascript代码动态生成meta标签：

         let scale = 1 / window.devicePixelRatio;

        document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

rem是相对尺寸单位，相对于html标签字体大小的单位：

如果html的font-size = 18px;

那么1rem = 18px，需要记住的是，rem是基于html标签的字体大小的。

1、将布局视口大小设为设备像素尺寸：

var scale = 1 / window.devicePixelRatio;

document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2、动态设置html字体大小：

      document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

3、将设计图中的尺寸换算成rem

元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值