|
|
@@ -0,0 +1,42 @@
|
|
|
+/******************************************************************
|
|
|
+Site Name:
|
|
|
+Author:
|
|
|
+
|
|
|
+Stylesheet: Retina Screens & Devices Stylesheet
|
|
|
+
|
|
|
+When handling retina screens you need to make adjustments, especially
|
|
|
+if you're not using font icons. Here you can add them in one neat
|
|
|
+place.
|
|
|
+
|
|
|
+******************************************************************/
|
|
|
+
|
|
|
+/*
|
|
|
+
|
|
|
+EXAMPLE
|
|
|
+Let's say you have an image and you need to make sure it looks ok
|
|
|
+on retina screens. Let's say we have an icon which dimension are
|
|
|
+24px x 24px. In your regular stylesheets, it would look something
|
|
|
+like this:
|
|
|
+
|
|
|
+.icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: url(img/test.png) no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+For retina screens, we have to make some adjustments, so that image
|
|
|
+doesn't look blurry. So, taking into account the image above and the
|
|
|
+dimensions, this is what we would put in our retina stylesheet:
|
|
|
+
|
|
|
+.icon {
|
|
|
+ background: url(img/test@2x.png) no-repeat;
|
|
|
+ background-size: 24px 24px;
|
|
|
+}
|
|
|
+
|
|
|
+So, you would create the same icon, but at double the resolution, meaning
|
|
|
+it would be 48px x 48px. You'd name it the same, but with a @2x at the end
|
|
|
+(this is pretty standard practice). Set the background image so it matches
|
|
|
+the original dimensions and you are good to go.
|
|
|
+
|
|
|
+*/
|
|
|
+
|
eddiemachado