Wayne Meyer

Overview Snapshot of CSS3

Frontend Developers have considered CSS Media Queries as their holy grail ever since CSS3 was released. Prior to Media Queries all We had was Floats, widths and percentages to work with & Media types in CSS2, wont forget those dreadful tables we were forced to use. When Smart Phones / mobiles got lift and went mainstream, developers were forced to find a solution for dealing with different devices and screen sizes which we now call responsive design.

Today we have media queries that are used in front-end design specifically to accommodate this need and eradicate the problems we were facing. When you see the declaration expression in parenthesis {} it is to be noted that a media query should confine to only the targeted media / screen size.

Whats really nice about media queries is that they are dynamic, no matter what device is launched by Apple iPhone, ipad or Google Android smartphones, we able to target these devices on the fly.

The CSS Code

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 - 5s ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}

/* iPhone 6 ----------- */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ ----------- */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /*** You've spent way too much on a phone ***/
}

Using the above code snippet developed specifically for production websites and applications, you should have all devices covered as of 2015. However in the future this will change and developers would have to update their media queries to include modern devices. I will elaborate on this post in the future showing examples on how i utilize media queries and how i eradicate the common problems developers have with front-end design.

CSS3 Media Query Tutorials

• http://ift.tt/1zhfAcZ
• http://ift.tt/1I547CB
• http://ift.tt/1K9nfuM

After Thoughts

With the modern capabilities of browsers, CSS3 has truly hurt graphic designers because of the new syntax we able to use that replaces graphics. In the past, shapes would be images designed by graphic designers, today web masters are designing graphics in code so that not only does a page load faster, but we also can adjust shapes sizes on the fly without re-sizing images to fit. I can conclude and confirm that CSS3 media queries has indeed improved my page load speeds.

References:

Media Queries CSS: http://ift.tt/1rdRRWY

The post Responsive CSS Media Queries For All Mobile Device Widths appeared first on Wayne Meyer.