Media Queries?
- Started
- Last post
- 25 Responses
- boobs
How many different ones do you use when making a responsive website?
- rabbit0
three. more specifically, i prefer the goldilocks approach.
http://goldilocksapproach.com/
its very neat.on the topic, two other tools i cant live without during responsive builds are responsive.is and Charles - charles is a proxy that allows me to view localhost web apps on my smartphones for testing, when they are not yet on a staging environment, or DNS resolved etc...
- < thank you. i'm trying to get back into web and have been learning the responsive stuff. those links are great!cbass99
- ernexbcn0
I think I did 4 for this one:
Just keep in mind how it looks on iPhone landscape/vertical, iPad landscape/vertical plus desktop browser. You can tune as much as you want that, that's up to you.
- Hombre_Lobo0
I use 3 because that suits the presentation of my content best.
at 46.25em, 56em, and 108em.(im not saying you are), but dont concern yourself with device size. The content should 'choose' where the media queries are, not devices. Start mobile first, scale up the window, when it looks bad or could be presented better add in a media query.
If you do this it will great on anything and you wont need to worry about specific devices. Of course device testing will be needed though.
- Hombre_Lobo0
forgot to mention above. I use em media queries not pixels, its more advisable to do so. it negates pixel density and references the browsers base font size, which is going to be a great relative size to use as a guide.
Having said that css pixels are not the same as actual pixels, but thats a whole other kettle of fish.
if you are using something like meanmenu* you might prefer to use pixel media queries as thats how the javascript menu changer works. you can reference em in javascript media queries but its a bit more work.
*http://www.meanthemes.com/plugi...
- ukit20
The people who created Bootstrap, who I'm guessing have researched this issue, mention four sizes:
Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)However sometimes, especially if you want a smooth transition effect on desktop as the user changes the browser window size, you may have to add additional breakpoints in between. There is no fixed number that you need but presumably at minimum you want your site to display properly on the three major kinds of devices — desktop, tablet and phone.
- noel0
two or max three. But with all elastic-width's
- orrinward20
I use 2-3 and I'm trying to cater more for the drastic size differences on Desktop by using more fluid systems.
Depending on the page and content I will group tablet as either based off the phone experience or the desktop.
- boobs0
Is there an online phone screen preview that's out there that's worth a fuck? None of the ones I've tried look like what shows up on my phone.
- browerstack.com?monNom
- typo.
http://www.browserst…monNom - FireFox.ArmandoEstrada
- bklyndroobeki0
from March 24, 2014
http://ericportis.com/posts/2014…
- monNom0
as few as possible, as many as needed. Generally 2-3
- dbloc0
How long is a piece of string?
- mg330
Quick question:
Can you group media queries together to prevent duplicating code CSS into multiple sections?
EX:
@media ( max-width: 500px ) @media ( max-width: 500px ) {
{
[CSS DETAILS]
}
}How can this be done exactly?
- ETM0
Sorry? Can you explain further?
Media queries will inherit. You don't need to duplicate code unless you are changing it for that particular device/resolution.
- ESKEMA0
Consider this:
.qbn {
color:blue;
background-color: green;
}@media only screen and (min-width: 1200px) {
.qbn {
background-color:yellow;
}
}@media only screen and (max-width: 480px) {
.qbn {
background-color:red;
}
}They all share the same color (blue) but have different backgrounds depending on the window width.
- you don't need to duplicate everything for each query, just what changes.ESKEMA
- nb0
@media (min-width:100px) and (max-width:350px) {
.class {color:red;}
}
^This means that the width must be BETWEEN 100px and 350px for the color to be red. In other words, both conditions must be met in order for the css to be applied. That's why the "and" is in there.Or, you can use a comma to separate two conditions, it works like an "or" statement:
@media (min-width:600px), (max-width:200px) {
.class {color:green}
}
^This is less common, probably because it's confusing. In this case, the color is green if EITHER condition is met. In my example, the color is green if the width is less than 200px or greater than 600px.- I think your top example is what I'm looking for. Thanks nb.mg33
- Also, what Eskema said is accurate. You don't need to duplicate everything. The most clear method is to start with mobile and use just min-widths as you grow.nb
- Or, start with the widest and use max-widths only, as you shrink. But I think starting small and min-widthing up is so much clearer and easier to do.nb
- gonzalle0
Considering I'm using ems and % everywhere,
I just use Three media queries for px resize at body level.
and two others for some few adjustments at screen orientation.
- HAYZ1LLLA0
3
- Maaku0
- - - - - - - - - - - - - - - - - - - - - - - - - - -
For the old question:Get the "Mobile Browser Emulator" extension for Google chrome.
Or just add a breakpoint wherever your design breaks when you resize.
- - - - - - - - - - - - - - - - - - - - - - - - - - -As for mg33, what nb said :)