منتديات نورة الحربي

 

 

!~ آخـر مواضيع المنتدى ~!
إضغط علي شارك اصدقائك او شارك اصدقائك لمشاركة اصدقائك!

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

Easy retina-ready images using SCSS

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 10-11-2012, 07:02 PM
rss
Guest
 
المشاركات: n/a
افتراضي 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.

Easy retina-ready images using SCSS Easy retina-ready images using SCSS
Easy retina-ready images using SCSS

أكثر...

Easy retina-ready images using SCSS

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

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

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

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

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

Bookmark and Share

RSS RSS 2.0 XML MAP HTML

الساعة الآن 06:39 PM

أقسام المنتدى

الشريعة و الحياة | المنتدى العام | مـنـتـدى الـعـرب الـمـسافـرون | أزياء - فساتين - عبايات - ملابس نسائية - موضة | مكياج - ميك اب - عطورات - تسريحات شعر - العناية بالبشرة | װ.. أطآيبُ ״ شّهية ]●ะ | اعشاب طبية - الطب البديل - تغذية - رجيم - العناية بالجسم | ديكور - اثاث - غرف نوم - اكسسوارات منزلية | صور - غرائب - كاريكاتير | {.. YouTube..} | منتدى الاسئله والاستفسارات والطلبات | مواضيع منقولة من مواقع اخرى | اخبار التقنية | مواضيع منقولة من مواقع اخرى2 | منتدى تغذيات | منتدى تغذيات الكلي | قِصصْ الأنْبِيَاء | قِسمْ الرَّسُول الكَرِيمْ والصَّحَابة الكِرامْ | القِسمْ الإِسْلاَمِي العَامْ | قِسمْ المَواضِيْع العَامَّة | قِسمْ الشِعرْ والشُعَرَاء | قِسمْ الخَوَاطِر المَنقُولَة | قِسمْ الصُوَرْ | قِسمْ القِصصْ والرِوَايَات | قِسمْ حَوَّاءْ | قِسمْ الطِب والصِحَّة | قِسمْ الصَوتِيَّات والمَرئيَّات الإسْلاميَّة | قِسمْ مَطبَخ صَمْت الوَدَاعْ | قِسمْ الدِيكورْ | قِسمْ كٌرَة القََدَمْ العَرَبِيَّة والعَالمِيَّة | قِسمْ المكْياجْ والإكْسسْوارَات | قِسمْ المَاسِنجرْ | قِسمْ الِسِياحَة والسَفرْ | قِسمْ أَفْلاَمْ الكَرتُونْ | قِسمْ الفِيدْيو المُتَنَوعْ | منتديات الرياضة | اخبار | مواضيع منقولة من مواقع اخرى3 | موقع اجنبي | كوكو فرنسا | كوكو هندية | كوكو روسي | كوكو دنمارك | كوكو ياباني | اخر اخبار العولمة | عالم الحياة الزوجية | عرض أحدث عمليات البحث الشائعة |



Powered by vBulletin® Version 3.8.8 Beta 1
Copyright ©2000 - 2018, KingFromEgypt Ltd Elassal
Adsense Management by Losha