dips:device independent pixels

当页面设置了

1

<meta name="viewport" content="width=device-width">

的时候，document.documentElement.clientWidth在大部分浏览器下，得到的是布局视区的宽度，等同于dips的宽度。

screen.width

对于screen.width的值：

• 在iOS视网膜设备上，screen.width返回dips宽。因此，在竖着显示的时候，视网膜显示屏的ipad和非视网膜显示屏的ipad返回的都是768.
• 在某些Android设备上，screen.width返回的是物理像素宽度

summary

• devicePixelRatio在大多数浏览器是值得信赖的.
• 在iOS设备，screen.width乘以devicePixelRatio得到的是物理像素值。
• 在Android以及Windows Phone设备，screen.width除以devicePixelRatio得到的是设备独立像素(dips)值。

摘自：http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

It’s important to remember that long selectors incur a small rendering performance penalty that in aggregate can slow down your web page. There is no need to exactly mimic your document structure in your css. Instead nest only deep enough that the selector is unique to that part of the document. For instance, don’t use table thead tr th when a simple th selector will suffice. This might mean that you have to separate your styles into several selectors and let the document cascade work to your advantage.
摘自：http://compass-style.org/help/tutorials/best_practices/

长的选择器会影响渲染表现，累积起来会导致页面变慢。
没有必要在css里效仿你的文档结构。只需要嵌套到该选择器在该部分文档唯一的就足够了。
比如，当一个简单的th选择器就够了的时候，不要使用table thead tr th。
这意味着你必须把样式分散在几个选择器中。