To enable background printing in Chrome: body { -webkit-print-color-adjust: exact !important; } Edit: For Chrome, Safari and Firefox: body{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
All three of these were helpful tips, but it looks like I needed to add a meta tag: <meta content=”width=device-width, initial-scale=1″ name=”viewport” /> Now it seems to work in both Android (2.2) and iPhone all right…
use double @@ symbols. That will escape @ symbol and render @media correctly on client side
That’s a media query. It prevents the CSS inside it from being run unless the browser passes the tests it contains. The tests in this media query are: @media screen — The browser identifies itself as being in the “screen” category. This roughly means the browser considers itself desktop-class — as opposed to e.g. an … Read more
max-width is the width of the target display area, e.g. the browser max-device-width is the width of the device’s entire rendering area, i.e. the actual device screen Same goes for max-height and max-device-height naturally.
The new standard is registered on W3C in Media Queries Level 5. NOTE: currently only available in Safari Technology Preview Release 68 In case user preference is light: /* Light mode */ @media (prefers-color-scheme: light) { body { background-color: white; color: black; } } In case user preference is dark: /* Dark mode */ @media … Read more
I’ve found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can’t read @media. When I use @media, I use it like this: <style type=”text/css”> /* default styles here for older browsers. I tend to go for a 600px – 960px … Read more
From the spec, The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection … Read more
@media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it: The value of the style attribute must match the syntax of the contents of a CSS declaration block The only way to apply styles to one specific element only in certain … Read more
Bootstrap 3 Here are the selectors used in BS3, if you want to stay consistent: @media(max-width:767px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){} Note: FYI, this may be useful for debugging: <span class=”visible-xs”>SIZE XS</span> <span class=”visible-sm”>SIZE SM</span> <span class=”visible-md”>SIZE MD</span> <span class=”visible-lg”>SIZE LG</span> Bootstrap 4 Here are the selectors used in BS4. There is no “lowest” setting in BS4 … Read more