【像素】
像素，又称画素，是图像显示的基本单位，屏幕中的像素越多，同一范围内能看到的内容就越多。或者说，当设备尺寸相同时，像素越密集，画面就越精细。
1.设备像素DP——设备屏幕的物理像素，任何设备的物理像素的数量都是固定的，图像的基本单位，即出厂设置，单位pt
2.CSS像素——又称独立像素，是没有实际大小的抽象单位，它是一个相对长度，它相对的是电脑或手机显示器的分辨率。常用单位px（相对于显示器屏幕分辨率，实际上是一个按角度度量的单位）
pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米
分为相对单位和绝对单位：
相对单位：em或rem，相对于另一个长度值，em基于元素字体的大小
绝对单位：px、英寸in、毫米mm，近似于屏幕上的实际测量值
in：是一个物理度量单位，1in == 96px
设备像素缩放比dpr：设备物理像素和设备独立像素的比例，即：dpr = 物理像素 / 独立像素
如：iPhnoe6屏幕物理像素点750 * 1334（750就是设备像素，1334就是CSS像素）
获取设备物理像素和独立像素的比：window.devicePixelRatio
我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳
【视口viewport】
视口，从字面上用常规思维可以理解为人眼的可视区域
在PC端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致
在移动端中，常将视口抽象划分为布局视口、视觉视口和理想视口
1.布局视口layout viewport
iOS, Android 虚拟视口分辨率为980px
布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取
2.视觉视口visual viewport
是指用户当前看到的区域，用户可以通过缩放来操作视觉视口，同时不会影响布局视口，布局视口仍保持在原来的宽度
当前缩放值 = 理想视口宽度 / 视觉视口宽度
与设备屏幕一样宽
3.理想视口ideal viewport
理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素dip
<meta name="device" content="width=device-width">
布局视口的宽度应该与理想视口的宽度一致
扩展阅读：依赖于哪一个视口
1.position:fixed 相对于视口的位置是固定的，不会随着滚动而变化
2.vw和vh单位是相对视口的百分比，width：25vw意味着元素的宽度是视口宽度的25%
3.<meta>视口：让布局视口的尺寸和理想视口的尺寸相匹配，是由Apple发明的
[参数]：
name属性：
<meta name="author" content="码@qq.com">
网站作者及作者的相关信息
<meta name="keywords" content="meta,html,学习">
网站关键字
<meta name="description" content="meta学习内容,html,学习">
网站描述
<meta name="subject" content="your website's subject">
网站主题
<meta name="copyright" content="XXX">
网站版权
<meta name="robots" content="none">
告诉搜索机器人，哪些页面需要索引
content的值：
all(默认)：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
noindex：文件将不被检索，但页面上的链接可以被查询；
follow：页面上的链接可以被查询；
nofollow：文件将被检索，但页面上的链接不可以被查询；
<meta name="generator" content="ultraedit">
generator用来说明这网页是用什么软件生成的
http-equiv属性：
<meta http-equiv="content-type" content="text/html;charset=gb2312">
content-type用来设定页面使用的字符集：
charset的信息参数如utf-8时，代表世界通用的语言编码；
charset的信息参数如gb2312时，代表说明网站是采用的编码是简体中文；
charset的信息参数如big5时，代表说明网站是采用的编码是繁体中文；
charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
charset的信息参数如iso-8859-1时，代表说明网站是采用的编码是英文；
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
X-UA-Compatible对文档兼容模式的定义
IE=edge：告诉IE以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响
chrome=1：激活Google Frame【官方提供了对 Google Frame 插件安装情况的检测，】
<meta http-equiv="content-language"content="zh-cn"/>
content-language，显示语言的设定
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">
expires（期限）设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。必须使用GMT的时间格式。
<meta http-equiv="pragma" content="no-cache">
pragma（cache模式）这样设定，禁止浏览器从本地计算机的缓存中访问页面内容，访问者将无法脱机浏览。
<meta http-equiv="cache-control" content="no-cache">
cache-control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置cache-control并不会修改另一个消息处理过程中的缓存处理过程。
<meta http-equiv="refresh" content="2;url=https://www.baidu.com/">
refresh自动刷新并指向新页面。代表停留2秒钟后自动刷新到新的网址：https://www.baidu.com/
<meta http-equiv="window-target" content="_top">
显示窗口的设定，这样设定会强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。
<meta http-equiv="imagetoolbar" content="false"/>
指定是否显示图片工具栏，当为false代表不显示，当为true代表显示
content属性：
width：设置布局视口的宽度为特定的值（正整数/device-width)
init-scale：设置页面的初始缩放比例（可以带小数）
minimum-scale：设置了最小缩放值（用户可缩小的程度，可以带小数）
maximum-scale：设置了最大缩放值（用户可放大的程度，可以带小数）
user-scalable：是否阻止用户进行缩放(yes/no)
shrink-to-fit=no：自适应宽度（IOS9）
网友评论