一篇真正教会你开发移动端页面的文章(一)

一 什么是像素？
像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义：

设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。
CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。

1 web前端领域，像素分为设备像素和CSS像素
2 一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。缩小的时候，一个css像素会变小；

一般一个css像素等于一个设备像素scale=1，苹果屏幕高密度一个css像素里大概4个物理像素。当缩小页面时，很多个css像素才对应了一个设备像素。

二 三个视口
一个块元素默认的宽度是其父元素的100%，body的宽度是html的100%；那html是基于谁的呢？
记住一句话：视口是html的父元素，所以我们称视口为初始包含块。 这样你就明白了，html元素的百分比是基于视口的。

好了，移动端的三个视口介绍完了，让我们总结一下：
1 在PC端，布局视口就是浏览器窗口
2 在移动端，视口被分为两个：布局视口(680-1024px，适应pc某些网站，web开发对应的css视口)、视觉视口(眼睛看到的大小)
3 移动端还有一个理想视口，它是布局视口的理想尺寸，即理想的布局视口。（注：理想视口的尺寸因设备和浏览器的不同而不同，但这对于我们来说无所谓）
4 我们的css是基于布局视口
这告诉浏览器把布局视口设为理想视口:<meta name="viewport" content="width=device-width"/>
width指的是布局视口的宽；device-width指理想视口的宽度；

三 设备像素比（DPR：device pixel ratio）
成立前提，缩放比是1 ；
设备像素比dpr = 设备像素个数 / 理想视口css像素个数（device-width）

打开浏览器调试工具：
1 iphone5的理想视口是：320*568 device-width：320 device-height：568
2 iphone5的设备像素比是2
根据公式可知，iphone5的设备像素是：640*1136；

缩放：
公式前提是缩放比是1，css像素的大小是可以变的，缩放从技术实现的角度来讲，就是放大或者缩小css像素的过程，当你用双指放大缩小页面的时候，实际上就是放大或缩小css像素。
缩放：缩小放大的是css像素。

meta标签：
meta标签存在的目的主要是为了将布局视口宽设为理想视口的宽，语法如下：
<meta name="viewport" content="name=value"/>
其中content属性是一个字符串值，字符串是由逗号分割的 名/值 对组成，共有5个：
1 width：设置布局视口的宽
2 init-scale：设置页面的初始缩放程度
3 minimum-scale：设置页面最小缩放程度
4 maximum-scale：设置页面最大缩放程度
5 user-scalable：是否允许页面对用户进行缩放操作
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
意思是：让布局视口的宽度等于理想视口的宽度，页面的初始缩放比例及最大最小缩放比例是1，不允许用户对页面进行缩放

媒体查询：
媒体查询是响应式设计的基础，有三大特点：
1 检测媒体的类型，比如：screen，tv等
2 检测布局视口的特性，比如：宽 高 分辨率等
3 特性相关查询（对web开发无用）
css中使用媒体查询的语法：
@media 媒体类型 and （视口特性阀值）{
//满足条件的css样式代码
}
实例：
@media all and (min-width: 321px) and (max-width: 400px){
.box{
background: red;
}
}
上面代码中，媒体类型为all，代表任何设备，并且设备的布局视口宽度大于等于321px且小于等于400px时，让拥有box类的元素背景变红。