clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-25 20:47:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

convert to preboot's retina mixin

Browse Source
This commit is contained in:
Mark Otto 2013-03-16 17:19:05 -07:00
parent 71d4b5b6e7
commit ef4898990f
1 changed files with 13 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
less/mixins.less
View File

@ -379,27 +379,20 @@
// RETINA IMAGE SUPPORT
// --------------------------------------------------
// Retina background image support with non-retina fall back
// Usage example can be found here: https://gist.github.com/dannykeane/4754113
.retina-image(@file, @type, @repeat, @width, @height, @posx, @posy) {
background-image: url('@{file}.@{type}');
background-repeat: @repeat;
background-position: @posx @posy;
// Short retina mixin for setting background-image and -size
.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
background-image: url("@{file-1x}");
@media print,
screen,
(-webkit-min-device-pixel-ratio: 1.25),
(~`"-o-min-device-pixel-ratio: 1.25/1"`),
(min--moz-device-pixel-ratio: 1.25),
(-moz-min-device-pixel-ratio: 1.25),
(-ms-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {
background-size: @width @height;
background-image: url('@{file}@2x.@{type}');
background-position: @posx * 2 @posy * 2;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}