视口viewport

一、viewport

1. 何为视口？ 视口是浏览器显示网页的矩形区域。

2. 默认视口：模拟一个大约1000像素宽的视口。

理想视口：因设备、操作系统、浏览器而异，一般而言，手机宽带大约在300～500像素之间（iphone 5宽度320像素），平板宽度在800～1400像素

可见视口：浏览器窗口减掉所有按钮、工作条、滚动条等组件之后，实际包含网页内容的空间。

布局视口：放大网页后某些部分会跑到可见视口之外。我们看到的那部分为可见视口，而假想的约束“整个页面”的矩形区为布局视口。

<meta name="viewport" content="width=device-width, initial-scale=1">

二、像素

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

css像素：逻辑像素，在css和javascript中使用的一个抽象的层。

每一个CSS声明和几乎所有的javascript属性都使用CSS像素，因此实际上从来用不上设备像素 ，唯一的例外是screen.width和screen.height.

缩放

在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。

　　//一个CSS像素完全覆盖了一个设备像素　

　

　　而在手机端，由于屏幕尺寸的限制，缩放是经常性的操作。

　　//设备像素(深蓝色背景)、CSS像素(半透明背景)
　　//左图表示当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素
　　//右图表示当用户进行放大操作时，一个CSS像素覆盖了多个设备像素

 

不论我们进行缩小或放大操作，元素设置的CSS像素(如width:300px)是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的。

 DPR(devicePixelRatio)

DPR = 设备像素 / css像素

CSS像素对应着以后要提到的理想视口，其对应的javascript属性是screen.width/screen.height

而设备像素比DPR也有对应的javascript属性window.devicePixelRatio

以iphone5为例，iphone5的CSS像素为320px*568px，DPR是2，所以其设备像素为640px*1136px。

640(px) / 320(px)  = 2
1136(px) / 568(px) = 2
640(px)*1136(px) /  320(px)*568(px) = 4

 三、媒体查询

1. <link>标签

<link rel="stylesheet" href="main.css"  media="screen and (min-width:600px)">

2. css文件中通过@media进行媒体查询

@media screen and (min-width: 600px) {
/* 写规则 */
}