Are media queries still compilant to manage the ui on different devices or something else is used now ? If so could someone help me with some good resources to learn them ?
Thank you !
These are some common media queries for standard devices.
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
It also helps a lot to find your target by taking a look at stats.
If you want to test some device physically you can check here.
Media queries are used very frequently in (and some would say one of the foundations of) responsive design for determining screen size break points.
Consider the following resources:
http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/
http://alistapart.com/topic/responsive-design
http://designmodo.com/responsive-design-examples/
http://mediaqueri.es/
An example:
<style>
#media (min-width: 500px) {
.my_div{
display: none;
}
}
#media (min-width: 501px) and (max-width: 1199px) {
.my_div {
display: block;
width: 200px;
}
}
#media (min-width: 1200px) {
.my_div {
display: block;
width: 400px;
}
}
</style>
Related
I'm creating ionic 4 angular app, and written media queries for IPhones. I'm write Iphone x and Iphone 6,7,8 plus media queries but Iphone x media queries also apply on Iphone x as well as Iphone plus.how to differentiate to each other ? Below shown media queries i'm using.
/* iphone 6+, 6s+, 7+, 8+ */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {}
/* iphone X */
#media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3){}
Because these not correct probably.
You are using -width on one and -height on the other so these media queries are not clamped exclusively.
I'm assuming the iPhone X is the biggest device but you are applying the rules from width 375px upwards... that's going to include ones that have width 414px and upwards.
It seems like this should cover all the iPhone scenarios:
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
You can get even more devices at:
Media Queries for Standard Devices | CSS-Tricks
Platform Mode
Also, don't forget that Ionic lets you use the ios selector in the sass to restrict the devices to ios mode:
Overriding Mode Styles - Platform Styles - Ionic Documentation
So something like:
.ios ion-badge {
text-transform: uppercase;
}
Will restyle everything with the mode="ios" set, which is done by default on ios devices, although it can be manually set to other values, so only use it if that's appropriate for your project.
Say I have a complex mixin function. Something like
.MyMixin(#Count, #ManyOtherVars)
{
.Item
{
width: calc( 100% / #Count);
}
//lot's of other rules not affected by #Count
}
And then I want to call this mixin with different values for different media
e.g.
.SomeClass
{
#media screen (max-width: 1000px)
{
.MyMixin(5, 1);
}
#media screen (min-width: 1000px)
{
.MyMixin(10, 1);
}
}
This works fine, except the generated css duplicates all the stuff which has not changed
#media screen (max-width: 1000px)
{
.SomeClass .Item
{
width: calc( 100% / 5 );
}
.SomeClass
{
/* lot's of other rules not affected by #Count */
}
}
#media screen (min-width: 1000px)
{
.SomeClass .Item
{
width: calc( 100% / 10 );
}
.SomeClass
{
/* lot's of other rules not affected by #Count */
}
}
Which, needless to say, is quite wasteful when only one thing changed.
Are there any workarounds to produce a leaner output that don't require the calling class to know something about what the mixin does, or for the mixin to know about media rules?
I thought maybe a detached rule-set could help, but given variables are not exported from those I'm not sure how it would.
Desired output:
#media screen (max-width: 1000px)
{
.SomeClass .Item
{
width: calc( 100% / 5 );
}
}
#media screen (min-width: 1000px)
{
.SomeClass .Item
{
width: calc( 100% / 10 );
}
}
.SomeClass
{
/* lot's of other rules not affected by #Count */
}
Remove static styles from your mixin and place them directly to SomeClass selector.
.SomeClass {
// Lot's of other rules not affected by #Count
#media screen (max-width: 1000px) {
.MyMixin(5, 1);
}
#media screen (min-width: 1000px) {
.MyMixin(10, 1);
}
}
Better solution:
.MyMixin(#Count, #ManyOtherVars) {
width: calc( 100% / #Count);
}
.SomeClass {
// Lot's of other rules not affected by #Count
.Item {
#media screen (max-width: 1000px) {
.MyMixin(5, 1);
}
#media screen (min-width: 1000px) {
.MyMixin(10, 1);
}
}
}
Now mixin does only one thing. It's simple and reusable.
I was commenting these code at bootstrap.css and my page is now not responsive. But my navbar still responsive. how to disable that?
/*#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}*/
Follow Bootstrap's official doc.
Bootstrap made a non-responsive.css template to disable responsiveness for your template. Take a look at this documentation: http://getbootstrap.com/getting-started/#disable-responsive
Example: http://getbootstrap.com/examples/non-responsive
But I see you want to do it your own way, so you could try this:
#media (min-width: 768px) {
.container, .navbar {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container, .navbar {
width: 970px !important;
}
}
#media (min-width: 1200px) {
.container, .navbar {
width: 1170px !important;
}
}
Note that the code above will only apply to the classes container and navbar. There are other components/classes that should have static widths and heights. So I would recommend you to take a look at the example above.
Must the Twitter Bootstrap breakpoints for media queries be used top down or bottom up and when to define max-width definitions - before or after the min-width definitions? I seem to not get the answer from the tb-stylesheet. When using these breakpoints with my own stylesheets it appears the ordering matters because i encouter definition extinctions or ignorance.
I required to take care for device withs < 768 (which is the last breakpoint for *-xs definitions). I must take care for withs 320px, 480px and 600px and am trying to construct a reliable processing order. These are my current definitions which appear to override each other at some point.
/* lg and up */
#media (min-width: 1200px)
/* md only */
#media (min-width: 992px) and (max-width: 1199px)
/* md and up */
#media (min-width: 992px)
/* sm only */
#media (min-width: 768px) and (max-width: 991px)
/* sm and up */
#media screen and (min-width: 768px)
/* xs only */
#media (min-width: 767px)
#media screen and (min-width: 480px) and (max-width: 767px)
/* e.g. iPhone 5 landscape */
#media screen and (min-width: 568px)
/* e.g. iPhone 4 landscape */
#media screen and (min-width: 480px)
/* e.g. iPhone 4 portrait */
#media screen and (min-width: 320px)
#media screen and (max-width: 320px)
/* e.g. Blackberry */
#media screen and (max-width: 349px)
#media screen and (max-width: 479px)
#media screen and (max-width: 567px)
#media screen and (max-width: 991px)
Somebody can clarify the correct order to prevent definition extinction?
CSS cascade rules apply to media queries so, if you want to override a rule with a media query, you need to make sure that the media query contains a rule with the identical selectors (or selectors with more specificity) and that it is loaded after the rule you want to override.
Same applies when you have multiple media queries. The cascade order along with rules for specificity and inheritance will dictate whether the media query is applied. Take for example:
body {
background-color: teal;
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
#media (min-width: 400px) {
body {
background-color: yellowgreen;
}
}
Each of the selectors above are identical so they have the same specificity, but because of the cascade order, the background will never be the tomato color. If the body is 600 or more pixel wide, the rule for making the background tomato will be overridden by the last rule which also applies because 600px is also wider than 400px.
If you reorder the rules as follows:
body {
background-color: teal;
}
#media (min-width: 400px) {
body {
background-color: yellowgreen;
}
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
Now, the body background will be teal, when the body is less than 400px wide. It will be yellowgreen when the body is 400px - 599px and it will be tomato, when the background is 600px wide or greater.
Of course, you can use max-width too. For example, if you had the following order, the limit on the width at 599px for the yellowgreen rule would ensure that that rule didn't apply once the body was 600px or more:
body {
background-color: teal;
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
#media (min-width: 400px) and (max-width: 599px) {
body {
background-color: yellowgreen;
}
}
So, for the TL;DR version, think mobile first. Organize your stylesheets with your base styles define for your smallest devices. Then order your media queries from the next smallest device sizes and up such that the largest devices you want to support are last.
And, don't forget to make sure that the rules in your media queries use selectors are identical to or have more specificity than the rule you want to override.
If I have few #media conditions like
#media (min-width: 640px) { ... }
#media (min-width: 640px) { ... }
#media (min-width: 2048px) { ... }
#media (min-width: 2048px) { ... }
is it possible in LESS to use something like
iphone = (min-width: 640px)
ipad = (min-width: 2048px)
#media (iphone) { ... }
#media (iphone) { ... }
#media (ipad) { ... }
#media (ipad) { ... }
?