The document discusses the Block Element Modifier (BEM) methodology which aids in creating reusable components in front-end development through a specific naming convention. It highlights the importance of viewport settings for responsive web design, including zoom control properties and device-specific CSS media queries. Additionally, it provides examples of media queries for various devices while emphasizing the transition from bitmap to vector images for better resolution.

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
}