In my previous post I mentioned that one of the issues of using @import in the child theme is that the JavaScripts that help media queries in IE8 and lower so not work.
So there are three solutions.
When using @import copy the media queries from the parent theme and paste in the child theme stylesheet.
Pro
- Simple and easy to do
Con
- For the rest of the browsers you have the media queries twice which makes debugging complicated
- The media queries needs to be updated if there are any changes in the parent theme
Use the solution of using functions.php that I presented in my previous post.
Pro
- Improves the loading speed of the stylesheets
- The media queries are only in one place and thus do not need to be updated
Con
- This is a bit more complicated and perhaps not so easy to understand for beginners
Theme authors add the media queries in a separate file and have the file always loaded from the parent theme
Pro
- The user is not confronted by this issue
Con
- An extra file is load just for the media queries
