I'm a little bit confuse when using Media query for responsive web design.
Actually, I'm new to it and I also want to ask that: is it necessary to add media query every single time you have a CSS error when shrinking down the web browser? I used to do it and my css had like a lot of media queries in it!
You should use media queries when you want to specify different style for a particular height/width of the screen.
Media queries can also be used to change layout of a page depending on the orientation of the browser.
Please use this link to find out more..
7 Practices for Effective Media Queries
Do use media query to design layout for desktop version. You should always think for mobile first layout then use media query to decide how should it look like in desktop version of site.
Related
I (like the rest of the world) use media queries to help with responsive design. As such, I am usually focused on writing a #media screen query.
But I am wondering - do I need to take screen readers (or even printers?) into consideration when using media queries for responsive design? I.e., are there situations where I would need to use #media speech in responsive design? If so, how.
And responsive design is irrelevant to speech readers, then when would I need to use a media query for a speech reader?
Based on the comments in the issue [mediaqueries-4 ] Deprecate 'speech' media type as well? there is currently neither a clear use-case nor any notable support for speech.
So based on that you currently don’t need to care about the speech media type.
The print media query on the other can be useful depending on what information your site provides, and if you want to hide e.g. the navigation of the website and include some contact information on the bottom of the site. Or change the font-family to a serife one that is easier to read when printed.
So my question is related to media queries. I want to know by using multiple media queries will affect browser rendering speed or it's fine to use any number of media queries?
You can use any number of media queries based on the device design and layout you are working on.
It won't affect on rendering speed on browser if your CSS is not much big in size.
Also make sure you don't duplicate the media query. Keep common things out of media query and only write css for things that change when the layout changes inside the media query.
It doesn’t matter if you use one big or multiple media-queries in your code assuming your values are mostly the same. It shouldn’t matter if your values are different for each(!) of your hundreds of media-queries but could affect performance (found no way to track this down).
You can refer the same here : https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/
I'm designing a mobile-first site and the thing is, height-based media queries could really benefit my page layout in many ways. But I am holding myself from using them because like more than 90% articles I've read about responsive design don't even mention vertical media queries.
Even mixin libraries exclude them like the one I use (Rupture). And here in SO they don't recommend using it. It really feels like it's a broken feature or has loads of compatibility issues...
I just noticed Instagram uses min-height on their mobile site So I thought maybe it's really safe to use them.
I am working on creating my site using Yahoo's Pure CSS modules(http://purecss.io/). I really like it so far. One thing I don't understand is how the media queries fit into it. Here is what it says on their grids page:
Default Media Queries
When using Responsive Grids, you can control how the grid behaves at
specific breakpoints by adding class names. Pure's default responsive
grids comes with the following class names and media query
breakpoints.
So I want to add some custom handling at the "xl" breakpoint. How do I do that? Also, how do I know which class to put my content into? I have used media queries before. I just can't quite wrap my head around how they did it here.
Hi i my self use pure because bootstrap is boring and bloated why not try something out of the box...the break point is easy on the xl query place your css class be that pures grid even they all can be broken so lets say .sidebar you want it gone on xl place that clas there..you can costumize the breakpoint on their site as well for different screen size if thats what your looking for. I hope this helps...but I am not sure if you are using WordPress but my purecss wp theme will be out shortly for developers and designers!
I am building a responsive design with bootstrap and I have two navigation bars, one for mobile and one for desktop.
Being a mobile first framework, the desktop one only triggers at min-width:992px and otherwise is set as display:none. I have a whole bunch of css for the desktop navigation, now I was wondering if it would be best to put it in the min width 992 media query, or just leave it outside of the media query.
What is the best practice?
Also, does media query CSS only get loaded when the media query is triggered? I'm fairly sure that CSS just gets loaded as is, but thought i'd ask.
You should try to use (%) instead of (px)