Adobe Muse Media Queries In Bootstrap
This question already has an answer here:
Bootstrap does not document the media queries very well. Those variables of @screen-sm, @screen-md, @screen-lg are actually referring to LESS variables and not simple CSS. When you customize Bootstrap you can change the media query breakpoints and when it compiles the @screen-xx variables are changed to whatever pixel width you defined as screen-xx.
- iPhone 6 and 6 Plus Media Queries 7 answers
According to Apple's site:
The iPhone 6 has 1334-by-750-pixel resolution at 326 ppi with 1400:1 contrast ratio (typical)
The iPhone 6+ has 1920-by-1080-pixel resolution at 401 ppi with 1300:1 contrast ratio (typical)
However, what would the CSS media query responsive breakpoints be for each? (portrait and landscape)
I don't fully understand how to test the retina screen sizes using the various responsive emulators out there. Any help would be much appreciated.
Vadim Kotovmarked as duplicate by Mo., Shankar Damodaran, Mureinik, Mark Rotteveel, benkaOct 5 '14 at 8:40
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
2 Answers
You're referencing the physical pixels of the device, rather than the css device-width sizes. According to this tweet, the device-widths for the two will be:
Knowing that (and assuming the tweet is correct), and assuming your using the proper meta viewport tag, you're looking at roughly:
Hope this helps!
Edit:
Regarding the 2.6 DPR of the iPhone 6 Plus, it's actually 3.0 DPR downsized by 1.15, which results in 2.6 DPR. More info can be found at http://www.paintcodeapp.com/news/iphone-6-screens-demystified for clarification (thanks @mdcarter for the link!)
JackYou can get list of media queries for all standard devices here
sputn1kNot the answer you're looking for? Browse other questions tagged ioscssresponsive-designmedia-queriesiphone-6 or ask your own question.
What is a Media Query?
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Example
If the browser window is 600px or smaller, the background color will be lightblue:
body {
background-color: lightblue;
}
}
Add a Breakpoint
Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.
Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.
Phone
Use a media query to add a breakpoint at 768px:
Example
When the screen (browser window) gets smaller than 768px, each column should have a width of 100%:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*='col-'] {
width: 100%;
}
}
Always Design for Mobile First
Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
This means that we must make some changes in our CSS.
Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:
Example
[class*='col-'] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Another Breakpoint
You can add as many breakpoints as you like.
We will also insert a breakpoint between tablets and mobile phones.
Tablet
We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px):
Example
Note that the two sets of classes are almost identical, the only difference is the name (col- and col-s-):
[class*='col-'] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
It might seem odd that we have two sets of identical classes, but it gives us the opportunity in HTML, to decide what will happen with the columns at each breakpoint:
HTML Example
For desktop:
The first and the third section will both span 3 columns each. The middle section will span 6 columns.
For tablets:
The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns:
<div>..</div>
<div>..</div>
<div>..</div>
</div>
Typical Device Breakpoints
Ray parker jr raydio rarity. There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:
Example
@media only screen and (max-width: 600px) {..}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {..}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {..}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {..}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {..}
Orientation: Portrait / Landscape
Media queries can also be used to change layout of a page depending on the orientation of the browser.
You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called 'Landscape' orientation:
Example
The web page will have a lightblue background if the orientation is in landscape mode:
Adobe Muse Media Queries In Bootstrap 1
body {
background-color: lightblue;
}
}
Hide Elements With Media Queries
Another common use of media queries, is to hide elements on different screen sizes:
Example
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Media Queries Screen Sizes
Change Font Size With Media Queries
You can also use media queries to change the font size of an element on different screen sizes:
Example
Media Queries Css
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media Reference
For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.