[B! retina] tomoyaのブックマーク

Retina images with SASS

The introduction of retina displays has added a wrinkle to the process of designing and developing websites. Unless we want our images to look blurry on the latest devices, we have to produce and deliver high resolution images1. Using SASS2 you can combine media queries and good old fashioned CSS image replacement to send high resolution images to retina devices and standard resolution images ever

tomoya 2013/07/23

リンク

CSS Techniques for Retina Displays — SitePoint

As many people use their highly porta ble devices for work and play, device manufacturers seek to enhance their user experience, making their devices simultaneously more powerful and easier to use. Apple gave us a completely new line-up of products that introduced double density pixel screens, creating sharper images on smaller screens. Other device manufacturers are following suit with their own v

tomoya 2013/02/06

リンク

http://retinajs.com/

tomoya 2012/12/31

リンク

さらばmozとoのdevice-pixel-ratio - fragmentary

そういえば、Firefox 16とOpera 12.10からメディアクエリーのresolutionとdppxが使えるのを思い出した。これらを使うと、Retina displayはじめ高密度なディスプレイに対応するコードがけっこう短くなる。これまではこんな感じ。 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1) { .foo { background-image: url(image-2x.png); } } } device-pixel-ratioはもともとWebKitの拡張だったもの。それをMozillaとOperaも取り入れたのだけど、ベンダー接頭辞の面倒さに加えてmin-/max-のつき方、値の書き方がばらばら

tomoya 2012/11/20