CSS – Responsive design basics

Responsive layout needs to be able to handle the different widths of different devices. 

Appropriate break points for the most popular devices…phones, tablets/laptops & PCs are:

Smart phone < 768px < Tablet < 1023px < Desktop

Rules are written using the @media rule.

Example:

@media only screen and (max-width: 768px){

/* CSS rules to apply to smart phones goes here */

}

This is read as… ‘apply these rules to screens that are less than 768 pixels‘. I find this syntax to be quite painful to read. It is clearer for me to reverse the logic. I read it as ‘Apply these rules if this is NOT false‘. Hence the above rule becomes, ‘if the width is NOT larger than 768 pixels, apply these rules‘.