CSS 像素与设备像素的一些疑问

Question

刚开始看自适应，碰到一个问题请教一下。
比如我现在有一个div 宽高都是300 样式如下：
div{
width: 300px;
height: 300px;
background-color: yellow;
}
因为我的手机分辨率是1920 x 1080 ，在手机中打开，大概占据三分之一的宽度，也就是说如果这里的css像素，和分辨率像素是一一对应的话，那是没有问题的。

但是如果加了这一行， （等比例显示？不太懂） 就会变成占据几乎整个屏幕，又通过alert(screen.height);alert(screen.width);得到的设备宽度是640 x 360，也就是说加了这一行，屏幕就是按360px的宽度来算的。

那么我的问题是，这个1920 x 1080 和 640 x 360分别是什么, 有什么对应关系？以及在自适应的页面开发中如何合适的选择呢？

Answer 1

一个是物理分辨率、一个是视口的大小~
这个网站上有各手机的物理分辨率与视口的大小~ http://screensiz.es/phone

Answer 2

或许这篇文章对你有用:移动端尺寸基础知识