This slide is designed to give some basic idea & working knowledge about BEM & Retina to frontend developers who are working with Retina support.

3. Block Element Modifier(BEM) is a methodology that helps you
to create reusable components and code sharing in front-end
development

4. To use BEM, you only need to employ
BEM’s naming convention.

5. Independent blocks and CSS selectors
make your code reusable and modular.

6. Using BEM, methodologies and tools
can be recomposed and configured the
way you like.

14.  iPads
 Galaxy Tablets
 Nexus Tablets
 Kindle Fire
 iPhones
 Galaxy Phones
 HTC Phones
 Laptop/Macbook
 iMac

15. 1) Using alternate high resolution pixels
2) Using @face-fonts instead of images icon
3) Using SVG images instead of Bitmap images
4) Using JavaScript to replace all the images with double
sized image

21. The initial-scale property controls the zoom level when the page is first loaded.
The maximum-scale, minimum-scale, and user-scalable properties control how
users are allowed to zoom the page in or out.
Viewport sizes for mobile and tablet devices http://viewportsizes.com/

22. Minimum-scale define minimum zoom. this work same as above but define minimum
scale. If you not define this its work without using this is useful when maximum scale
is large and you want to set minimum scale that time you can use.
Maximum-scale define maximum zoom. When you access website top
priority is maximum-scale=1 won’t allow the user to zoom.
User-scalable assign 1.0 means website allow to zoom in or zoom out.
But if you assign User-scalable=no its means website not allow to zoom in or
zoom out.

23. /* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
// CSS
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
// CSS
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
// CSS
}

24. /* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
// CSS
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
// CSS
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
// CSS
}

25. /* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
// CSS
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
// CSS
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
// CSS
}

26. /* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 2) {
// CSS
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
// CSS
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
// CSS
}

27. /* ----------- iPad ----------- */
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
// CSS
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
// CSS
}
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
// CSS
}

28. /* ----------- Mac Book Pro / iMac ----------- */
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
// CSS
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
// CSS
}