العودة   Forums > مواضيع منقولة من مواقع اخرى2

إضافة رد
أدوات الموضوع انواع عرض الموضوع
قديم 10-11-2012, 08:02 PM
rss rss غير متواجد حالياً
Senior Member
تاريخ التسجيل: Sep 2012
المشاركات: 721,760
افتراضي Easy retina-ready images using SCSS

If you’re interested in adding retina image support to your website or app and you happen to be using SCSS, here’s a handy shortcut that makes it dead simple.

Just include this SCSS mixin in any rule and specify the high resolution image’s path and device independent pixel dimensions. Here’s an example:

div.logo { background: url("logo.png") **-repeat; @include image-2x("logo2x.png", 100px, 25px); } Putting the high resolution alternative in the same rule as the **rmal image instead of putting it in a separate @media query rule or in different stylesheet altogether is a big win in terms of clarity in our CSS. It’s easier to read, easier to understand and easier to maintain.

The image-2x mixin detects high resolution displays like this:

@mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { /* on retina, use image that's scaled by 2 */ background-image: url($image); background-size: $width $height; } } The mixin **t only makes development easier, but it centralizes the definition of high resolution displays so it can easily be changed globally as more devices come to market. The @media query is based on the one in Thomas Fuchs’ Retinafy book but, for example, we’ve already modified it to define the Google Nexus 7 with it’s 1.3 pixel ratio as a retina-capable device.

A key insight here is that with SCSS, @media queries can be nested inside other rules. Such that these both work the same:

@media print { body { // print styles } } body { @media print { // print styles } } Purists of hand-crafted CSS may rail that this method results in the rule being repeated in the compiled CSS each time we use this mixin and that’s true. Basecamp is light on images so we’re talking about a handful of repetitions, **t dozens or hundreds. It also seems likely that as SCSS continues to improve, these rules will be smartly combined. For **w that trade-off is worth the improved clarity and convenience in our code.

رد مع اقتباس
إضافة رد

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

الساعة الآن 01:28 AM

converter url html by fahad


Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd. TranZ By Almuhajir
Adsense Management by Losha
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47