Today I want to share a small but very useful web design tip. Screens are getting bigger and bigger as each day goes by. Thankfully we are no longer restricted to the walls of 800×600 but unfortunately we can’t (yet) count out 1024×768. A very popular monitor size that many web users are still using with either their PC set up or little notebook.
So, what if you have done a beautiful web design and have an amazing background image or have designed elements that push certain things outside of the 1024 width bracket?
Easy, you have 1 style sheet for any screen size over 1024 and another for anyone under. It’s like I.E detection but for the screen size. The code you use is super simple and easy to input. In your head enter the following code:
<link rel="stylesheet" media="screen and (max-device-width: 1024px)" href="path/1024.css" />
The above will detect any screen resolution 1024px in width and lower and use the stylesheet ’1024.css’, which has been rejigged to suit smaller screens. So, you can have your super wide website in all it’s glory and still account for the people still rocking the smaller screen and best of all, it validates!
One thing I must mention, this detects the screen resolution, so if someone has a 1600px wide screen but has scaled their browser down to 1024 or below, this css line won’t count them as applicable to use the 1024 stylesheet.
That’s it guys!! Have fun, keep it real and innovate don’t replicate!
this is amazing ,its working , but with ie8 bugs