Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

CSS Media Queries for All Devices and Browsers (Including IE7 and IE8)

CSS3 keeps on impressing and frustrating web designers and developers. It brings a lot of possibilities and resolves a lot of problems. However, there happen to be some drawbacks in CSS3 still annoying the tech geeks. This is where CSS media queries may come in handy. But, before moving further to consider the advantages they bring, let’s start with determining what media queries are.

Simply put, media queries define the modules in CSS3 which enables rendering so that the content adapts to different conditions like screen resolution. Media query is built on media type and one or more expressions that include media features. The latter determines if the result of the query is true or false. Generally, media queries allow for creating responsive layouts and adapt them to users who browse from different devices without changing the content.

With CSS media queries defined, it’s time to consider them in action.

In CSS3, web developers/designers can define a media type such as screen or print, and specify the look of the content by setting conditions such as width, height, or orientation. A CSS media query combines a media type and a condition that shows how web content will appear on a particular device.

CSS Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, CSS media queries expand the role of the media attribute that controls how your styles are applied. For example, it’s been a common practice for years to use a separate style sheet for printing web pages by specifying media="print".


Making Your Website Responsive What Are Your Options [Free eBook]


CSS Media queries take this idea to the next level by allowing developers target styles based on a number of device properties, such as screen width, orientation, and so on. Following table demonstrates CSS media queries for all browsers in action. They all show the same web page as it's viewed in a desktop browser, tablet or an iPod touch.

There's a thing about media queries, you don't need to use them if you opt for a ready-made website template that is already optimized for all possible devices and screen resolutions.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}

/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

Media Queries Support

CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on smartphones and other screen-based devices.

Although older versions of IE don’t support media queries, still there is a way you can make it work.

Even though everyone thinks that earlier versions of IE are already extinct, there is a great amount of people using them, her are some stats:

1 Chrome 37 24.85%
2 Safari 7 10.60%
3 Firefox 32 8.03%
4 Internet Explorer 11 7.31%
5 Chrome 36 5.62%
6 Android 4 3.94%
7 Firefox 31 3.91%
8 Internet Explorer 8 3.66%
9 Internet Explorer 9 3.08%
10 Internet Explorer 10 2.34%

Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support CSS3 Media Query and that is very important for cross-browser responsive web design. Here I will tell you how you can solve the CSS3 Media Query issues for IE.

Here is a great jQuery plugin called css3-mediaqueries. It's very easy to use.

Download jQuery plugin and include downloaded script just before the </body> like this:


Or you can use the following way to include the script.





Then write media query in style sheet and check it in IE. It will work nicely with IE8, IE7, even in older versions IE6 or IE5.


Notes

It doesn’t work on @import’edstylesheets

Write media query the following way:

@media screen and (min-width: 980px)
{
/* CSS Document */
}

Use keyword 'and' in query (‘or’ is not supported).

One thing must be noted is that the "screen" is necessary:

@media (min-width: 481px) { /* ... */ } will not work, it must be
@media screen and (min-width: 481px) { /* ... */ }

HTML Themes Made to Look Good on All Devices 

When looking for ready-made HTML web designs made with clean and clear CSS, look through the collection of themes in the TemplateMonster digital marketplace. All made to look stunning on all devices and web browsing applications, they deliver the perfect functionality in all web environments. 

Multipurpose Intense - #1 HTML Bootstrap Website Template

Multipurpose Intense - #1 HTML Bootstrap Website Template

Intense is a fully-featured, multipurpose website template. It comes loaded with literally everything your website needs. Thanks to its clean design and trendy layout, it's highly flexible and dynamic. Also, the template can be easily tweaked to perfectly match your brand identity. Intense can greatly skyrocket your sales as well as attract more customers to your website. This responsive HTML template is pre-loaded with an extended set of pages that are 100% ready-to-use. For instance, they include over 30 Portfolio Pages, 50+ Blog Pages, 30+ eCommerce-ready Shop Pages, etc. Such a variety of pages can easily make your website more informative and attractive.


Hitech - HTML5 eCommerce Website Template

Hitech - HTML5 eCommerce Website Template

Hitech is Multipage Ecommerce HTML5 is the biggest template with a modern look. Hitech is super responsive template is suitable for any kind of Ecommerce Website. It is built using Bootstrap4 framework. Hitech HTML Template includes every possible option and section as you needed for a Ecommerce website. Fully customizable, responsive and optimized for performance, It's makes easier than ever before to present properly and create your website for user experience. 


Brave Theme - Multipurpose HTML Website Template

Brave Theme - Multipurpose HTML Website Template

The Brave multipurpose HTML website template provides everything you need for building a website your business needs. Even if you are a freelancer, you might find something your website needs. With over 100 HTML pages and 12 niche layouts, there's a lot to choose from. Also, our solution provides a wide range of well-integrated features for your website. 


DreamSoft - Software Development Company Multipage Website Template

DreamSoft - Software Development Company Multipage Website Template

With the software development agency website template, you receive everything your company needs to succeed online. First of all, it includes an impressive design crafted by our team. Also, its informative layout is based on Bootstrap 4. It allows for high responsiveness as the template supports all modern devices & various display resolutions. Besides, our template offers a variety of useful features for your website, including:

  1. W3C valid & SEO-ready coding
  2. Cross-browser support
  3. Google Maps & Google Fonts
  4. SCSS & Pug source files
  5. Parallax effect


theFuture - Web Design Agency Multipurpose Website Template

theFuture - Web Design Agency Multipurpose Website Template

theFuture web design agency multipurpose website template provides impressive design for your site. It also comes with a variety of layouts designed for various types of content. With diverse page layouts and content sections, the possibilities are endless. You can describe your services or tell the story of your company with text, images, or videos. Moreover, we encourage you to use the numerous features of this template. Here are some of them:

  1. W3C valid coding;
  2. SEO-ready & responsive layout;
  3. Google Fonts & Google Maps;
  4. Impressive CSS3 transitions and animations;
  5. The smooth Parallax scrolling effect;
  6. Cross-browser support.


That's it, if you have some other ideas on how to use CSS media queries feel free to drop your ideas in the comments below. Have a great day.


FAQ

What is the CSS3 media query?

It is a function, added in CSS3 which allows the user to define the conditions when some rules will be used. For example, it allows changing the layout when the width of the screen becomes smaller. Or to download the file with printing properties only when users want to print something.

Why do I need to use CSS3 media queries?

They allow adapting the content of your website to the specific device and browser so that all the users will have the best possible experience.

What browsers support the CSS3 media queries?

Internet Explorer (IE) version 9+, Firefox 3.5+, Safari 3+ and Opera 7+.


Read Also

CSS3 Cheat Sheet for Dummies Learning to Code

How To Make Stylish Checkboxes And Radio Buttons With CSS3

Free CSS3 Hover Effects to Copy and Paste

Custom CSS3 & jQuery Toggle Search Form: Tutorial


Ahmed Faisal

How to make your website responsive and how to work with Bootstrap like a pro? Check out in Ahmed's articles.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

28 responses to “CSS Media Queries for All Devices and Browsers (Including IE7 and IE8)”

  1. iwckwm says:

    can hydroxychloroquine cause blindness hydroxychloroquine update today

  2. Bukakke says:

    Enjoyed the read

  3. RitPieva says:

    But the fundamental idea behind the Bitcoin casino faucet goes back to the beginning of Bitcoin history. Bitcoin faucet sites were born with the sole idea of spreading the word about cryptocurrencies, firstly only bitcoins (see our bitcoin guide here). With this method, the user could get into the digital wallet and how transactions throughout the blockchain work. We can say that at the beginning of the Bitcoin Era, it was kind of essential to spread the buzz around this cryptocurrency. No recently-read stories. Generally speaking, they do yes. However, this isn’t always the case and for Bitcoin users, this is very rarely the case. Sportsbook providers prefer customers to deposit using Bitcoin, as it’s swift and convenient. As such, they offer great promotions and deals on Bitcoin deposits. https://www.nairabloggers.com/index.php/community/profile/hwax22960627747/ Bingo is not considered to be a type of an interactive game, according to the South African gambling legislation which makes it legal in South Africa not only in its land-based playing options but also online. Beside the widely popular land-based bingo games in the country, however, there are no sites offering online bingo in South Africa, as of January 2020. We cannot accept any transactions from this Jurisdiction. According to legend, the name “Bingo” was a happy accident stemming from a minor misunderstanding. After discovering the game of Beano at a local carnival, Lowe is said to have arranged a quick game with friends, only for the eventual winner to mishear the rules and yell “Bingo” upon completing her card. As we’re so sure that you will love your online bingo experience with us, Giggle Bingo are prepared to put our money where our mouth is! That’s right, will give you $10 FREE bonus in BBz (Bingo Bonus Money)!

  4. We’re a group of volunteers and starting a new scheme in our
    community. Your website provided us with valuable information to work on. You have done
    an impressive job and our entire community will be grateful
    to you.

  5. Somebody essentially help to make significantly articles I might state. This is the very first time I frequented your web page and so far? I amazed with the analysis you made to make this particular publish extraordinary. Excellent task!

  6. Hi, just wanted to say, I liked this article. It was inspiring.
    Keep on posting!

  7. kat says:

    Arsenal's 22-year-old French midfielder Matteo Guendouzi is currently in his second season of being loaned out by the London club after failing to impress Mikel Arteta. In addition to this Julian Nagelsmann, the current Bayern manager, is a fan of the defender. Nagelsmann believes that Niklas Sule is already a world-class footballer and believes he can do more in the coming years. Hence, we may see Niklas Sule extend his stay at Bayern. But the interest from other clubs is also strong. Having topped the class in Guardiola’s school of tiki-taka football, all 14 Manchester City players involved in the 5-0 thumping – goalkeeping Ederson included – completed more passes than Arteta’s Arsenal players. The Athletic reported that Arsenal had signed 19-year-old midfielder Tim Akinola. A few days later, Arsenal confirmed the news. https://emiliohxnb087531.verybigblog.com/8472339/sky-sports-live-scores Tonight will be Firmino’s 300th appearance in all competitions for Liverpool. Live audio commentary of Liverpool vs. Man City and a full match replay and highlights will also be available on LFCTV GO here. You can follow live updates of the match in our dedicated Manchester derby live blog here. Liverpool start the second half on the front foot, Alexander-Arnold winning a corner off Hermoso on the right. Mané gets his head to the right-back’s delivery – and for a moment it looks like it’s flying into Oblak’s top corner, only for the Slovenian to get fist to the ball and beat it out! Fine save from Oblak. Liverpool has a history that stretches back nearly 127 years ago, with much of that time being filled with glory. They have nearly always been at the forefront of top-flight football, particularly during the 70s and 80s, but have seen continuous success for much of the latter part of the 21st century. Thus, Liverpool on TV events have always been a spectacle.

  8. Why users still make use of to read news papers when in this technological globe everything
    is accessible on net?

  9. Prednisone says:

    Viagra E Cialis E Levitra

  10. Georgia is developing quickly.

    Feel free to surf to my website Irwell Hill Residences Condo Price list

  11. umitkoy implant ümitkoy implant

    Greatest Kılavuzu umitkoy implant için

  12. Google says:

    Google

    Although internet websites we backlink to below are considerably not related to ours, we really feel they are truly worth a go by, so have a look.

  13. what is the best free online dating site yahoo answers

  14. Google says:

    Google

    Here are a few of the web sites we advocate for our visitors.

  15. Google says:

    Google

    We came across a cool web-site that you might appreciate. Take a appear if you want.

  16. 검색순위 says:

    Hi, Neat post. There is an issue together with your
    website in internet explorer, may test this?
    IE still is the marketplace chief and a large component of folks will omit your
    great writing due to this problem.

  17. Hello! Someone in my Myspace group shared this site with
    us so I came to give it a look. I’m definitely enjoying the information. I’m book-marking and will be tweeting
    this to my followers! Great blog and great design.

  18. mostakim islam says:

    thank’s a lot for your article & website .
    it’s very helpfully for a learner or begginer.

  19. This site definitely has all the information and facts I wanted
    concerning this subject and didn’t know who to ask.

  20. GGG says:

    Simple, effective – WORKS.
    *Good job*

Leave a Reply

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