I am new to front end development and recently came across media queries and how they work.
I learnt bootstrap prior to media queries and now I am wondering is media query necessary? I feel Bootstrap does the same thing when you create grids and mention the column class name i.e col-2-sm xs, lg etc and gives the responsive feel. Could somebody please guide when what must be used?
Bootstrap is a CSS framework, if you want to use it, you'll have to learn it. Or write your own queries.
And btw, it's col-sm-2 meaning if the screen width is small(≥576px), it should give the div the width of two columns.
Media queries and Bootstrap are two different approaches. you can use bootstrap to make responsive web design without any knowledge about media query because bootstrap has grid system which allow you to make RWD but you can learn media query to make your own grid system or make some change on any size you want
to read and learn about Media Query :
https://www.w3.org/TR/mediaqueries-4/
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Bootstrap 4 Grid System :
https://getbootstrap.com/docs/4.0/layout/grid/#
Bootstrap 4 Grid System :
https://getbootstrap.com/docs/5.0/layout/grid/
Related
I am currently studying responsive concept and media queries, and I havent be able to understand the purpose of it, since we can use "%" for size properties in our CSS files. In fact for example in my CSS file if I add the "width" style property like this : "{width: 70%;}", my Web page will fit into any screen sizes because it will take 70% of it, without regarding the screen ? Or maybe she will be displayed with too small characters, that would be the explanation of why we use responsive methods ? It seems like maybe I didnt really get the purpose of it. Thank you for all your help.
Have you used a news website? In broad devices like laptops, there are multiple columns across the screens. While you use the same website on mobile phone, a single column takes all the available space. This is where responsive design and media queries come in. You can observe the same effect almost everywhere on the web.
Suppose if the news website had set the width of each column as 25%, the it would look good on a laptop, but the width of each column would be then very less when you view it in mobile phone (as 25% of mobile screen width would be very low) and this would make the text unreadable. This is why % units don't work everywhere and we need responsive design and media queries.
This is not the only use of media queries. You can even specify how your webpage will look when printed with the help of media queries. Modern css frameworks like Bootstrap are completely based on media queries
Still if you have any doubts related to the use of responsive techniques like media queries, you can just google "uses of media query" or "uses of responsive design" and you will get tons of articles and posts on their usability.
The use of % and other units can be done to a small extent but they don't give us the freedom responsive design gives us. Responsive design is more than using such units.
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.
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)
I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.
In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.
Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by registering for media query events.
Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?
I am looking for general advice, but I can post code and screenshots if that will help.
Update: Looks like media query events are not well supported.
Your on the right track. Use CSS media Queries. Firefox has a nice add on that enables you to adjust the page to a particular viewport so that you can see the changes pixel by pixel, though Im sure chrome would have something similar
There are no special tricks just because its bootstrap, as long as you have enabled the responsive stylesheet then you are pretty much good to go
This is a good place to start for media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/