media-queries

问题 I've been searching for a lightweight, flexible, cross-browser solution for accessing CSS Media Queries in JavaScript, without the CSS breakpoints being repeated in the JavaScript code. CSS-tricks posted a CSS3 animations-based solution, which seemed to nail it, however it recommends using Enquire.js instead. Enquire.js seems to still require the Media Query sizes to be hardcoded in the script, e.g. enquire.register("screen and (max-width:45em)", { // do stuff } The Problem All solutions so

问题 I've been searching for a lightweight, flexible, cross-browser solution for accessing CSS Media Queries in JavaScript, without the CSS breakpoints being repeated in the JavaScript code. CSS-tricks posted a CSS3 animations-based solution, which seemed to nail it, however it recommends using Enquire.js instead. Enquire.js seems to still require the Media Query sizes to be hardcoded in the script, e.g. enquire.register("screen and (max-width:45em)", { // do stuff } The Problem All solutions so

问题 I am trying to combine an IE10+ specific media query with a max-width page break point. I am pretty sure they can be combined but am not sure how to do it. Here is the original IE10+ only css media query: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ } Here is my feeble attempt at combining them: @media (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (max-width: 950px) { /* IE10+ CSS styles go here */ } The IE

问题 Simple one probably. I've made a webpage and now need it to be responsive to a mobile at 375px; In the html I have added: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> My two columns are named in the html as follows: #columnleft { float: left; width: 50%; text-align: center; background-color: #E8F8F5; } #columnright { float: right; width: 50%; text-align: center; background-color: #F4ECF7; } <div id="columnleft"> ..... </div> <div id="columnright"> ..... </div> I

问题 This question already has answers here : What is the difference between “screen” and “only screen” in media queries? (5 answers) Closed 12 months ago . What does the 'only screen' code mean in a media query? //See below the 'only screen' part of the code @media only screen and (min-device-width: 320px) I have used code that works without the 'only screen' part of the code. What does it do or how does it help? 回答1: From https://www.w3schools.com/cssref/css3_pr_mediaquery.asp only: The only

问题 Paper isn't the same shape the world over. I have a document that I want to print differently when it's printed on A4 versus US Letter. Some elements should be hidden or shown. The obvious suggestion is to use a media query like so: @media print and (max-height: 280mm) { .a4-only { display: none; } } This doesn't appear to work, though, presumably because it's using the total document height or some irrelevant window height rather than the page height. Is there a way of addressing page size

问题 Does anyone know why my media queries code doesn't work ? <div class="box"></div> .box { background-color: red; width: 100%; height: 50px; } @media only screen and (max-device-width: 768px) { .box {border: 5px solid blue;} } http://jsfiddle.net/N9mYU/ 回答1: You would use (max-width: 768px) instead of (max-device-width: 768px) . See the difference between max-device-width / max-width explained here. Add a viewport if you want the media query to work on mobile devices: <meta name="viewport"

问题 Does anyone know why my media queries code doesn't work ? <div class="box"></div> .box { background-color: red; width: 100%; height: 50px; } @media only screen and (max-device-width: 768px) { .box {border: 5px solid blue;} } http://jsfiddle.net/N9mYU/ 回答1: You would use (max-width: 768px) instead of (max-device-width: 768px) . See the difference between max-device-width / max-width explained here. Add a viewport if you want the media query to work on mobile devices: <meta name="viewport"

问题 Does anyone know why my media queries code doesn't work ? <div class="box"></div> .box { background-color: red; width: 100%; height: 50px; } @media only screen and (max-device-width: 768px) { .box {border: 5px solid blue;} } http://jsfiddle.net/N9mYU/ 回答1: You would use (max-width: 768px) instead of (max-device-width: 768px) . See the difference between max-device-width / max-width explained here. Add a viewport if you want the media query to work on mobile devices: <meta name="viewport"

问题 What are the correct CSS media queries used to target Apple's 2019 devices? The iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max. 回答1: iPhone 11 /* 1792x828px at 326ppi */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { } This media query is also for: iPhone XR iPhone 11 Pro /* 2436x1125px at 458ppi */ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { } This media query is