你写的下面的那个css选择器中间没有加空格，代表的是同时拥有class为ucenter-left和class为ucenter-l-header的元素，举例：
<div class="ucenter-left ucenter-l-header"></div>范围一般就分手机端，平板和电脑显示器，手机端不管多少寸的都套用一个范围，平板套用一个范围，然后显示器套用一个范围就好。响应式布局已经有现成的框架，比如bootstrap，可以直接拿来套用设备像素比 （Device Pixel Ratio, DPR ）：其实指的是 window.devicePixelRatio , 被所有WebKit浏览器以及Opera所支持，一个设备的物理像素与逻辑像素之比。
当像素比为1:1时，使用1个物理像素显示1个CSS像素；当像素比为2:1时，使用4个物理像素显示1个CSS像素；当像素比为3:1时，使用9（3 3）个设备像素显示1个CSS像素*。
像素为什么会有“物理”和“逻辑”之分，它们之间什么区别？
其实在很久以前，的确是没区别的，CSS里写个 1 px ，屏幕就给你渲染成1个实际的像素点， DPR=1 ，多么简单自然~
后来苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏，也就是说这种屏幕拥有的物理像素点数比非高清屏多4倍甚至更多。如果还按照DPR=1进行展示，那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4，这样的话由于图片在屏幕上的展示面积大大缩小，也会导致出现“看不清”的问题。
举个例子，iPhone 6的物理像素上面已经说了，是 750 * 1334 ，那它的逻辑像素呢？我们只需在 iPhone 6 的Safari里打印一下 screen.width 和 screen.height 就知道了，结果是 375 * 667 ，这就是它的逻辑像素，据此很容易计算出 DRP为2 。当然，我们还可以直接通过 window.devicePixelRatio 这个值来获取 DRP ，打印结果是 2 ，符合我们的预期。
举例：
设备宽高为 375×667 ，可以理解为设备独立像素(或css像素)， dpr为2 ，根据上面的计算公式，其物理像素就应该 ×2 ，为 750×1334 。
上图中可以看出，对于这样的css样式：
相同尺寸下，普通屏幕 VS Retina 屏，css像素所呈现的物理尺寸（大小）是一致的，不同的是一个css像素所对应的物理像素的个数不一致：
即4个物理像素显示一个css像素 ；
从以上现象得出的结论是 ：
UI设计师按照手机物理像素出设计稿，切图时根据其设备像素比来换算设备独立像素（CSS像素），比如视网膜手机iPhone6，物理像素 750px×1334px ，由于其设备像素比为2，CSS切图时需要将设计稿的所有尺寸除以2，才是正确CSS像素值。
