移动端前端设计的基础知识

像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义：
1、设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。
2、CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。

css像素是可变的，当放大或者缩小屏幕大小时，实际改变的是css像素的大小。
设备像素是固定的，他的大小和数量在一个设备上是固定的。

设备像素比（Device Pixel Ratio 简称：DPR）：
公式成立的大前提：（缩放比例为1，即：没有缩放css像素）
设备像素比 = 设备像素个数 / 理想视口CSS像素个数(device-width)

视口（viewport）
1、布局视口：移动端CSS布局的依据视口，即CSS布局会根据布局视口来计算。
可通过以下方式来获取布局视口的宽度和高度
document.documentElement.clientWidth
document.documentElement.clientHeight
2、视觉视口：用户浏览的区域
3、理想视口：理想的布局视口
可以通过以下方式告诉手机浏览器把布局视口设为理想视口
<meta name="viewport" content="width=device-width" />
meta视口标签存在的主要目的是为了让布局视口和理想视口的宽度匹配
其中 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 ">

 

以上内容是参考了以下知识的，详细知识可访问以下链接：

1、http://hcysun.me/2015/10/16/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0%28%E4%B8%80%29/

2、viewport：http://www.cnblogs.com/2050/p/3877280.html

3、http://www.css88.com/archives/5975

转载于:https://www.cnblogs.com/yiyiboy-core/p/7337804.html