Not fully clear what you want to combine, but basically you separate them with a comma eg @media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) { …
I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at http://codepen.io/anon/pen/jPeLYb?editors=110 : @mixin max-width($width) { @media screen and (max-width: $width) { @content; } } .container { position: relative; display: flex; flex-flow: row wrap; } .item … Read more
This can be done with Level 4 Media Queries: (Browser Support is quite good – CaniUse) Interaction Media Features The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets) The pointer media feature queries the quality … Read more
iPhone X @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { } iPhone 8 @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { } iPhone 8 Plus @media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : … Read more
use double @@ symbols. That will escape @ symbol and render @media correctly on client side
You can’t do that directly using Javascript <script> tags. Media queries are used in linked CSS files or inline CSS styles. A basic example: <link rel=”stylesheet” media=”screen and (min-width: 900px)” href=”https://stackoverflow.com/questions/15823137/desktop.css”/> <link rel=”stylesheet” media=”screen and (min-width: 571px)” href=”tablet.css”/> <link rel=”stylesheet” media=”screen and (max-width: 570px)” href=”mobile.css”/> Or directly in your stylesheets: @media screen and (max-width: 599px) … Read more
Here is what W3C has to say about this: The media attribute says which media the resource applies to. The value must be a valid media query. […] However, if the link is an external resource link, then the media attribute is prescriptive. The user agent must apply the external resource when the media attribute’s … Read more
Device-width refers to the display’s resolution (eg. the 1024 from 1024×768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn’t maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough … Read more
I’d recommend taking after Twitter’s Bootstrap with just these four media queries: /* Landscape phones and down */ @media (max-width: 480px) { … } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { … } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { … } /* … Read more
Adaptive layouts (Responsive layouts) consists of the following three factors: 1. Flexible Layouts: The divs you use to create your web page layouts need to consist of relative length units. This means you shouldn’t use fixed widths in your CSS, rather use percentages. The formula to convert sizes from a design to percentages is (target/context)x100 … Read more