I have seen so many responsive website designs which have been created by taking a desktop/laptop design and then adding CSS media queries to the end of the stylesheet to deliver a responsive solution. Doing it this way means that you are negatively affecting your page load times. Let me explain…
If your user accesses your website with a mobile device the first thing the browser does is work through all of the large screen CSS rules and then works through the relevant media queries to deliver the correct styling. Because the large screen CSS is often a lot more complex you are having the mobile device work through all of the desktop CSS code for no reason only for it to be overwritten, again with lots of code, to deliver the mobile styling. You end up with multiple large sets of CSS fighting against one another.
The old desktop first approach meant that the image would be downloaded on a mobile device and then ignored!
Instead you should write mobile first CSS. Use these mobile first CSS rules as a base style for all devices. You will be pleasantly surprised just how little code it takes to create your mobile/base styles. After your base CSS comes the media queries for your larger screen sizes. Using this approach, if you have large background images for desktop styling they will only be downloaded if the user has a desktop (the old desktop first approach meant that the image would be downloaded on a mobile device and then ignored!)
If you have your mobile styles first, and the large screen media query styles last, in your CSS file then the mobile devices will never have to work through all of the redundant desktop only CSS. The media query criteria for the desktop styles will be not be met by mobile devices and therefore will not be processed.
Using a mobile first CSS stylesheet the page load goes as follows:
For mobile devices; loads only the mobile CSS code and ignores any desktop styles in media queries.
For desktop devices; inherits the base CSS styles and then applies the correct CSS based on the media query criteria.
Next site you build try putting your base CSS styles at the beginning of your stylesheet and wrap your large screen styling in media queries at the end.