Register now or log in to join your professional community.
Hi Mohammed Ayub mollah Thanks for Questioning me.Answer:Befor using Media Queries , i want to give you a simple explaination what are media queries , why we need of them.?
CSS Media queries allow you to target the CSS rule Based on Different Resolution Screen Devices e.g. Smart Phone[Iphone, Android etc], Tablets[Ipad, samsung tablets etc]. when we use the media queries for all different resolution screen, it will hit the specific CSS on these resoltion.We use Media Queries to build a responsive design, Tablets, Desktop and mobile resoltion is different to each other, so we write the css with in the Media queries to make a good required effect on different devices.Which Media Queries are most important to use and how to you on Standard Devices Resolutions are as under :
* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width :360px)
and (max-width :640px) {
/* Styles */
}
@media only screen
and (min-width :320px)
and (max-width :480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width :321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width :768px) {/* Styles */}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width :320px)
and (max-width :480px) {
* Styles */
}
@media only screen
and (min-device-width :768px)
and (max-device-width :1024px) {
* Styles */
}
@media only screen
and (min-width :768px)
and (max-width :1024px) {* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width :768px)
and (max-device-width :1024px)
and (orientation : landscape) {
/* Styles */
}
Please follow these resolution web standards to build great responsive websites.Hope this will help for you.
If there any new question or any question, feel free to put your question.Kind RegardsMuhammad Bilal AhmedUI UX Designer DeveloperPure sol Pty Ltd Islamabad(Australia/Pakistan)
Here is basic code for Media Quries
@media only screen
and (min-device-width :320px)
and (max-device-width :480px) {
/* Styles */
}
Basically you are telling browser load these style if browser screen size is between320-480px wide , you can create multiple instanse for different screen sizes , Just keep your global styles outside media quries you only need to define only those styles here which require on that particluar screen
