响应式布局（1）-- 像素和视口

1. 前言

    最近准备针对移动端css和react学习，补一下常用的而我又很弱的前端知识。笔记都是从网上教程摘录的，会随着学习的深入一直更新。

2. 像素和视口

(1)  像素

    以iphone6为例

    分辨率：750pt x 1334pt

        指的是屏幕上水平有750个物理像素，垂直有1334个物理像素。

    屏幕尺寸：4.7in

        指的是屏幕对角线长度。

    屏幕像素密度：326ppi

        指的是每英寸屏幕所拥有的像素数，在显示器中，dpi = ppi。dpi强调的是每英寸多少点。屏幕像素密度 = 分辨率 / 屏幕尺寸。

    设备像素

        设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。

    设备像素比

        缩写为dpr，设备像素比 = 物理像素 / css像素（垂直或水平），可以通过window.devicePixelRatio获取。

   iphone6的css像素为375x667，dpr为2，则物理像素为750x1334，还有一台设备，css像素为375x667，dpr为1，此时物理像素为375x667。

    设备独立像素

        也叫做逻辑像素(对于前端来说，和我们的css像素是一样的)，这个不同的设备是不一样的。在viewport为ideal-viewport模式时， 如iphone6此时的viewport为375px，代表着我们在css中写375px就可以达到全屏的效果；

     css像素

        为web开发者创造的，在css(JavaScript)中使用的一个抽象的层。css相当于多少个设备像素取决于屏幕的特性(是否高密度)和用户进行的缩放。当用户放大得越大，一个css像素覆盖的设备像素就越多。

(2)  PC端和移动端不同的视口

    以下涉及的像素均为CSS像素，并且默认不考虑缩放。

    布局视口

    在pc端，除去margin, padding, 初识包含块即布局视口，和浏览器可视窗口宽度一致。

    在移动端，默认情况下，布局视口的宽度远大于浏览器宽度，这2个视口不同于PC端，是相互独立存在的，CSS布局会根据它来计算并被约束。

    视觉视口

        视觉视口是用户正在看到的网站的区域内CSS像素的数量，用户可以通过缩放来操作视觉视口。

        红色箭头区域就是视觉视口区域，它和设备屏幕一样宽，并且它的CSS像素的数量会随着用户缩放而改变。

        在PC端，缩放对应布局宽度和视觉窗口宽度是联动的，而浏览器宽度本身是固定的，无论怎么缩放都不受影响。

        在移动端，缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的CSS像素变多，视觉视口变大，反之亦然。

    理想视口

        为移动端准备的，只有手动添加meta视口标签才生效：

       

       width=device-width 告诉浏览器布局视口的宽度应该与理想视口的宽度一致。定义理想视口是浏览器的工作。

       IE浏览器中，由于横屏竖屏的切换会对其造成影响，所以加了initial-scale = 1，意思是初始缩放的比例是1，设置之后，会将布局视口的尺寸设置为缩放后的尺寸，而缩放的尺寸就是基于屏幕的宽度来的，也就起到了和和 width = device-width同样的效果。

        媒体查询的时候，查询的宽度是布局视口的宽度。