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
Basically A responsive table is simply a 100% width table. You can just set up your table with this CSS: .table { width: 100%; } <table class=”table” border=”1″> <thead> <tr> <th colspan=”2″>Table head</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </tbody> </table> You can use media queries to show/hide/manipulate columns according to the … Read more
I have determined an appropriate solution, it is as follows: CSS will use variables and themes: // root/default variables :root { –font-color: #000; –link-color:#1C75B9; –link-white-color:#fff; –bg-color: rgb(243,243,243); } //dark theme [data-theme=”dark”] { –font-color: #c1bfbd; –link-color:#0a86da; –link-white-color:#c1bfbd; –bg-color: #333; } The variables are then called where necessary, for example: //the redundancy is for backwards compatibility with … Read more
Determine which devices you want to support and then add a stylesheet with something along these lines: /* =Responsive Structure ———————————————– */ @media (max-width: 800px) { /* Smaller Resolution Desktops and Laptops */ […] } @media (max-width: 650px) { /* Smaller devices */ […] } @media (max-width: 450px) { /* Even Smaller devices */ […] … Read more
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
Here’s how I did it: @media (pointer:none), (pointer:coarse) { } Based on https://stackoverflow.com/a/42835826/1365066
I know this is a couple of years late but I found a great solution For landscape media: @media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */} And for portrait media: @media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */} The full solution and why it works can be found here … Read more
2 Part Answer Part 1: To answer “why people are using min-width over max-width?”: It has to do with design flow. Typically, with min-width patterns, you’re designing mobile-first. With max-width patterns, you’re design desktop-first. Going mobile-first with min-width, the default style is the mobile style. Queries after that then target progressively larger screens. body { … Read more
Finally found a solution from : Detect different device platforms using CSS <link rel=”stylesheet” media=”all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)” href=”https://stackoverflow.com/questions/8271493/ipad-portrait.css” /> <link rel=”stylesheet” media=”all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)” href=”ipad-landscape.css” /> To reduce HTTP call, this can also be used inside you existing common CSS file: @media all … Read more
ANSWER EDITED AGAIN 21.03.2022: In the current version of the spec, using calc (or var) in media queries is NOT supported by the spec (as TylerH pointed out below). Properties sometimes accept complex values, e.g., calculations that involve several other values. Media features* only accept single values: one keyword, one number, etc. * Media features … Read more