Guide to CSS mobile first media queries & How to write responsive CSS.

This article was written by in March 27, 2015, & may not be posted on other sites!
Original source url for this article: Guide to CSS mobile first media queries & How to write responsive CSS.

Guide to CSS mobile first media queries & How to write responsive CSS.
Technological development is moving fast, and all websites need to be designed and programmed for visitors using both computors & laptops with full screen width, but also smaller devices like tablets & mobile phones. Soon if not now, your website will have more visitors on smaller devices than full screen laptops. This is where “mobile first” comes in. Mobile first basically means that you build your website for mobile first, and then adapt it to larger devices, rather than the traditional opposite, design for full screen first, and then adapting the website for smaller devices. This is a guide to CSS mobile first media queries & how to write responsive CSS: Mobile first!

 

Guide to CSS mobile first media queries & How to write responsive CSS.

Guide to CSS mobile first media queries & How to write responsive CSS

Mobile first means to design a website for mobile and smaller devices first, and then adapting it to tablets and full size screens, Responsive means that the website is adapting to the device used. The website will look a little different depending on which kind of device is viewing it. Mobile design is mostly build vertically, and full screen design is built horizontally for obvious reasons.

 

How to start with mobile first design & programming

Create your design in a graphic program, for example Photoshop. Create at least one design for full screen, and one for mobile phones, and if needed, one for tablets. On smaller devices, some content might be strippet away, and on larger screens, some content might be added.

Start with the content using HTML and programming as you would building any other website. Then add CSS only for mobile phones. When mobile website looks great, then start du adapt the website for larger devices, for example tablets, and last full screen,

 

CSS mobile first media queries & responsive CSS

Here is an example of media queries to add after the main CSS code for the mobile design. This mean that in your CSS file: first comes mobile CSS, then large mobiles & tablets, and last full screen laptops and desktops. Something like this:

/*Mobile Large 620px*/
@media screen and (min-width: 38.75em) {
/*your code*/
}


/*Tablet Small 740px*/
@media screen and (min-width: 46.25em) {
/*your code*/
}


/*Tablet Large 880px */
@media screen and (min-width: 55em) {
/*your code*/
}


/*Desktop Small 955px*/
@media screen and (min-width: 59.6875em) {
/*your code*/
}


/*15.5 Desktop Medium 1100px */
@media screen and (min-width: 68.75em) {
/*your code*/
}


/*15.6 Desktop Large 1240px*/
@media screen and (min-width: 77.5em) {
/*your code*/
}


/*Desktop X-Large 1403px */
@media screen and (min-width: 87.6875em) {
/*your code*/
}


/*Print*/
@media print {
/*your code*/
}

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *