V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
wuhuaji
V2EX  ›  CSS

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

  •  
  •   wuhuaji · 2015-05-18 23:04:57 +08:00 · 3063 次点击
    这是一个创建于 3462 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    但是如果加了这一行,<meta name="viewport" content="initial-scale=1.0" width="device-width"> (等比例显示?不太懂) 就会变成占据几乎整个屏幕,又通过alert(screen.height);alert(screen.width);得到的设备宽度是640 x 360,也就是说加了这一行,屏幕就是按360px的宽度来算的。

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

    2 条回复    2015-05-19 12:44:08 +08:00
    Sivan
        1
    Sivan  
       2015-05-18 23:15:13 +08:00   ❤️ 4
    wuhuaji
        2
    wuhuaji  
    OP
       2015-05-19 12:44:08 +08:00
    @Sivan 多谢分享 信息量有点大,我正在消化
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1595 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 17:02 · PVG 01:02 · LAX 09:02 · JFK 12:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.