Register now or log in to join your professional community.
What are CSS Media Queries, and how to implement them
Best site to know about this. Checkout http://mediaqueri.es
is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen) , it giving you the ability to create an iPhone version of your website as an example .
So you can build multiple css file for different windows sizes , so you can define css for800px window size or css sheet for1024 window size :
@media only screen and (max-device-width:480px) {
div#wrapper {
width:400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height:93px;
position: relative;
}
}
so this code will only take effects in480px devices , this link may help
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. (source https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
Simply we can use this to apply diffrent CSS styles to different devices(PC, Smart Phone, Tablet).
@media (max-width:600px) { .facet_sidebar { display: none; }
}
source (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
css media queries help you to do your webpage responsive for all devices
Basm allah alrahman alrahim
don't forget to use
<metaname="viewport"content="width=device-width, initial-scale=1.0"> at your html file , @media is the best thing that will happens to any website responsive designer if he understand it will , and it can help you to change your layout from device to another device not only stretch and compress
