media-queries

问题 How can I detect via JavaScript if browser supports CSS3 media queries? How can I detect via JavaScript if browser supports CSS3 gradient? Thank you. 回答1: Have a look at http://modernizr.com/, it's a great library for featuredetection using javascript. 回答2: Cracking open Modernizr (which can test for media queries) we see it uses the window.matchMedia (MDN page) function. We can check in plain old vanilla JS to see if this function exists (Modernizr is really awesome, but sometimes you just

问题 When I tried to validate my website, the W3C CSS Validator says parse error. I really tried to understand what I had done wrong but I could really need some help. This is what the validator says: Parse Error: @keyframes line_draw{ 100%{ width: 100vh; } } And this is the code in the file: @media screen and (min-width: 900px) { @keyframes line_draw{ 100%{ width: 100vh;} } 回答1: As @BoltClock said, it seems just IE doesn't recognize @keyframes inside @media rules, so you could create two

问题 I,m trying to show eight column grid based Flexbox on iMac 5k display (5120 × 2880) but I could not understand which media query exactly I used for only 5K resolution ! @media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } I also want only 5K resolution will effects, moreover in 4k display resolution its showing as i expected 回答1: Disregarding any padding, scrollbars, etc. and assuming this is only for full screen displays, you'll want to use

问题 I have this markup: <div class="girls" style="text-align:center; margin-top:100px"> <img src="images/1.png" /> <img src="images/2.png" /> <img src="images/3.png" /> <img src="images/4.png" /> and this css (I'm using Twitter Bootstrap) : img { height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } The images have equal width and height and are displayed inline. On my resolution are ok, fit the entire width (1366px), but on lower resolutions the

问题 I was wondering if it is possible to add a meta tag using jquery to an html page before the page loads. The reason why I ask, is because I have a page with no viewport meta tag on and it should have it only when the resolution drops below 700px - <meta name="viewport" content="width=device-width, initial-scale=1"/> The reason being, I have html markup for mobile site (using media queries) & also html markup for desktop version ( I don't have one for tablets). I want to make sure html markup

问题 I've seen some of these...: @media print { ... } @media screen, handheld, print, projection { ... } @media all { ... } @media all and (property:value) { ... } @media screen and (property:value) { ... } @media only screen and (property:value) { ... } @media screen and (property:value) and (property:value) { ... } @media screen and (property:value), tv and (property:value) { ... } ...but I'd like to know the exact syntax / all possible combinations for media queries because I'm modifying a CSS

问题 Folks voting to close as not constructive , read the whole thing please. Specific questions at the end. Looking for real world examples and approaches. Context With numerous devices like smart-phones, tablets being used increasingly to access the web its important to plan, design (responsively) and develop (esp. your front end) to give the devices a fast and tailored user experience. There's some amazing sites being built. Have a look at mediaqueri.es (resize your browser) We see approaches

问题 when I write some style in layout.css it applies in every screen size and in /* #Media Queries section, you have these sections: /* Smaller than standard 960 (devices and browsers) */ /* Tablet Portrait size to standard 960 (devices and browsers) */ /* All Mobile Sizes (devices and browser) */ /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ so none of these do what I want. Where should I write large screen specific css codes? 回答1: suppose you have a div like <div

问题 Does anybody know how to create a media query that would behave like this: @media screen and (width greater than height){} or @media screen and (height less than width){} For what is stated in the syntax specification it's not possible to use 'media_feature' as values. Is there any workaround WITHOUT using JavaScript? The closest thing I could get was using aspect-ratio but it was not functional. Thanks. 回答1: You can use an orientation media query: @media all and (orientation:portrait) { … }

问题 I've recently been developing a mobile version for a website, and quite simply want to be able to change the CSS file if the browser is detected to be on a mobile device. You can view my previous attempts here, but I have now decided that the most feasible way of getting this done is to focus on Media Queries. The problem I have here is that the media queries just don't work at all. It always loads the default stylesheet. Here is the code I have: <meta name="viewport" content="width=device