小编Mas*_*nni的帖子

媒体查询@ 2x,@ 3x和@ 4x图像

我正在尝试支持我正在开发的当前站点上的各种像素比率.我还想确保提供任何所需的浏览器前缀,以支持最广泛的设备/浏览器.此外,我尽可能使用SVG,但我需要一个摄影图像的解决方案.理想情况下,我想提供:

  1. @ 1x图像(像素比率1.0)
  2. @ 2x图像(像素比率为1.25+)
  3. @ 3x图像(像素比率为2.25+)
  4. @ 4x图像(像素比率为3.25+)

我的问题是,为了达到这个目的,编写媒体查询的最佳方法是什么?我主要担心的是,我的论点对于我正在努力实现的目标是正确的.我很感激您的任何建议或建议.目前我的代码如下:

/* @1x Images (Pixel Ratio 1.0) */
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {
    #dgst_shopping_bag {background-image:url(img/shopping_bag@2x.png);}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
       only screen and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-device-pixel-ratio: 2.25),
       only screen and (min-resolution: …
Run Code Online (Sandbox Code Playgroud)

css image css3 retina-display media-queries

20
推荐指数
2
解决办法
2万
查看次数

npm WARN弃用lodash@2.4.2:不再维护lodash @ <3.0.0

使用npm在全局安装grunt-cli时遇到错误.这与lodash有关:

npm WARN deprecated lodash@2.4.2:
lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^3.0.0.
Run Code Online (Sandbox Code Playgroud)

以下是我正在使用的版本以及安装的全局包列表.

node: v5.1.0

npm: v3.5.0

npm list -g: http ://pastebin.com/NuJU3bY0


我试图在全局安装最新版本的lodash(v3.10.1),但在卸载我的grunt-cli全局包后再次出现错误,然后重新安装我的全局包.以下是安装日志:

sudo npm install lodash -g
/usr/local/lib
??? lodash@3.10.1

sudo npm install grunt-cli -g
npm WARN deprecated lodash@2.4.2: 
lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^3.0.0.

/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
/usr/local/lib
??? grunt-cli@0.1.13
  ??? findup-sync@0.1.3
  ? ??? glob@3.2.11
  ? ? ??? inherits@2.0.1
  ? ? ??? minimatch@0.3.0
  ? ?   ??? lru-cache@2.7.3
  ? ?   ??? sigmund@1.0.1
  ? ??? lodash@2.4.2 …
Run Code Online (Sandbox Code Playgroud)

node.js npm gruntjs lodash grunt-cli

20
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

css3 ×1

grunt-cli ×1

gruntjs ×1

image ×1

lodash ×1

media-queries ×1

node.js ×1

npm ×1

retina-display ×1