css3关于device-width /Viewport

一.device-width（输出设备的屏幕可见宽度-视口宽）分界点：

1.手机：

   240px   320px    360px   384px   400px  480px

2.pad：

   533px  600px    768px    800px   853px   1024px  1280px  1366px

3.pc：

  1280px   1366px   1440px  1600px   1680px   1920px   2560px

二.媒体查询的时候使用device-width：

  @media screen and (device-width:1024px){ … }
  @import url(example.css) screen and (min-device-width:800px);
  <link media="screen and (min-device-width:300px) and (max-device-width:900px)" rel="stylesheet" href="css/style.css"/>

三.概念：

    Window.innerWidth这里代表的视窗宽度；窗口大小是css像素值。当用户用滚轮放大缩小自己的窗口大小的时候，Window.innerWidth/height会相应的变化.

    screen.width和screen.height可以获取用户屏幕的尺寸。获得的尺寸值的单位是设备像素，换句话说，它们是不变的(可以看成是显示器的硬件指标，而不随浏览器窗口缩放而变化)。

    需要注意的是在定义media query的时候可以用两套长宽：

   css里的width/height表示的是documentElement. clientWidth/Height取值，也就是viewport，单位是css像素。

   css里的device-width/height表示的是screen.width/height，单位是物理像素。