Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Best Way to Use Responsive Media Queries for all Devices

Ashfaq Ahmed by Ashfaq Ahmed
January 13, 2020
in How To
0
Best Way to Use Responsive Media Queries for all Devices
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

The Responsive media queries used to get well display your website for all devices such as a small smartphone or large desktop devices.

These queries can be used for the screen resolution ranges from 320 Px to 1824 Px or even more large screens. It is important to cover all the most in used screen sizes while developing a website.

Nowadays users access your site from not only laptop or monitor but also mobile phones, mini notebooks and tablet devices such as iPad or Playbook. So when you are going to design a website, you should keep in mind all the general devices and their screen sizes.

The website design with a fixed width doesn’t work for these useful devices so we should require the site should be responsive and can easily view all kinds of devices. The layout of the website should be automatically adjusted to fit all kinds of screens resolutions.

In this article, I will teach you how to create different media queries for Responsive Design. In my last post, I have listed some top famous CSS frameworks which you can use to build your website to get the responsive layout.

Now I am going to share with you how you can add more queries to your custom site or a site that builds using a framework.

Remember that, Using a framework doesn’t mean that you don’t need media queries because the framework does not handle each element of your website.

How to Use Responsive Media Queries for all Devices

The below media queries for smartphones and IPads are work with portrait and landscape view. These queries work with min and max width of the device.

If you want to separate the queries for landscape and portrait, then you need to define @media only screen with min-width.

/* Smartphones */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}
/* iPads */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

For example, If we want to separate the media queries for landscape and portrait for smartphones then our queries will look like below.

/* Smartphones (landscape) */
@media only screen 
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

To handle the design of desktop and laptop, You have to add the following media queries.

/* Desktops and Laptops */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}
/* Large Screens */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

There are many more screen sizes available and you can use the media queries for these sizes but it’s not necessary.

The above queries are sufficient to make a site fully responsive. Any size bigger than 1824 Px will still look the same as the 1824px size screen.

Previous Post

How to Create Different Box Shadow Effect in CSS

Next Post

Create Stylish Responsive Pure CSS Tabs

Next Post
Create Stylish Responsive Pure CSS Tabs

Create Stylish Responsive Pure CSS Tabs

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.