CSS Media Queries
Designing your layout to work for many different screen widths such as desktops, tablets, and phones can be tricky. Thankfully there is an invaluable CSS trick to help you in your adventures called CSS Media Queries.
CSS Media Queries let you set CSS styles based on the screen width of your browser.
There are two ways you can handle this. The first is by pulling a specific stylesheet and the second is usage directly in the stylesheet.
Pulling a Specific Stylesheet
1 |
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> |
Usage Directly in the Stylesheet
1 2 3 4 5 |
@media (max-width: 600px) { .right_sidebar { display: none; } } |
The following are some of the most common CSS Media Queries I use:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*Anything Less than an iPad Width in Landscape (768px)*/ @media screen and (max-device-width: 768px), screen and (max-width: 768px){ body.page-template-myhome-php .header-left { margin-left: 50px; } } /*Anything Less than an Phone Width in Landscape (568px)*/ @media screen and (max-device-width: 568px){ h1{ font-size:82px; } } |
There are more details such as logical operators (not, and, and only) and examples that can be found at developer.mozilla.org
Recent Comments