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) { ... }
?
Related
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.
I tried to convert a more "advance" mixin from SASS to LESS but unsuccessful.
Here is the mixin:
.breakpoint(#point) {
#if #point == really big{
#media (max-width: 80em) { #content; }
}
#if #point == mid {
#media (max-width: 60em) { #content; }
}
#if #point == small {
#media (max-width: 42em) { #content; }
}
}
and another one, I didn't touch this one:
#mixin keyframes( $animationName )
{
#-webkit-keyframes $animationName {
#content;
}
#-moz-keyframes $animationName {
#content;
}
#-o-keyframes $animationName {
#content;
}
#keyframes $animationName {
#content;
}
}
update
I did not check the sample code provide by #Harry in the comments, before answering this question. This sample code provide a good a clean way to solve your question too. Please also see: http://codepen.io/hari_shanx/pen/ayIej
First notice that Less do not support if / else constructs (alhought mixins libraries such as https://github.com/pixelass/more-or-less adds .if() (if - then - [else]) ), but uses guards to create conditional mixins, also see: http://lesscss.org/features/#mixin-guards-feature
or alternatively consider http://lesscss.org/features/#mixins-parametric-feature-pattern-matching
Your mixins also use the #content; which you call the #content directive, i think you should compare this with "Passing Rulesets to Mixins", see: http://lesscss.org/features/#detached-rulesets-feature.
Your first mixin using pattern-matching:
.breakpoint(reallybig;#content)
{
#media (max-width: 80em) { #content(); }
}
.breakpoint(mid;#ruleset)
{
#media (max-width: 80em) { #content(); }
}
example caller:
.breakpoint(reallybig; {p{color:red;}});
Your first mixins leveraging guards:
.breakpoint(#size;#content) when (#size = 'really big')
{
#media (max-width: 80em) { #content(); }
}
.breakpoint(mid;#ruleset) when (default())
{
#media (max-width: 80em) { #content(); }
}
.breakpoint('really big'; {p{color:red;}});
And your second mixin:
.keyframes(#animationName;#animation)
{
#-webkit-keyframes #animationName {
#animation();
}
#-moz-keyframes #animationName {
#animation();
}
#-o-keyframes #animationName {
#animation();
}
#keyframes #animationName {
#animation();
}
}
#animation: {0% {
left: 0;
transform: translate(10px, 20px);
}
100% {
left: 100%;
transform: translate(100px, 200px);
}};
.keyframes(test;#animation);
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>