media-queries

问题 I have a number of media queries in my site that resize various elements on pads/ smartphones. I've just added another media query to resize the same elements on lower-resolution laptops and discovered that Firefox and Chrome seems to be ignoring my use of background-size. The media query is working, parts of them are being picked up, but not background-size. It works fine in safari. Any ideas why? My CSS is: @media only screen and (min-height: 768px) and (max-height: 800px) { #title-we-are {

问题 I have web application which follows responsive web design techniques. I'd like to serve different (bigger) font size for TV and different (smaller) for screen even when both have the same resolution. Why? Because when user uses 32" monitor as screen, he probably sits closer to it than user who uses it as TV. The code: body {font-size:14px;} @media (min-width:1900px) {body {font-size:20px;}} @media tv and (min-width:1900px) {body {font-size:30px;}} should do all the work (if I understand how

问题 I'm using window.matchMedia conditional in order to avoid the inject of a video in mobile devices. Here it says that matchMedia is going to work smoothly since Safari 9 (I'm testing on it), but my code is completly ignored: if ( window.matchMedia("(min-width: 1025px").matches) { console.log('match'); document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false); function initialiseMediaPlayer() { (stuff here...) } } This code works perfectly on Chrome, Chromium

问题 :-moz-system-metric(touch-enabled) looks like a really useful CSS selector for working on mobile sites. Unfortunately Webkit is dominant on mobile touch devices so does anyone know if there is a Webkit equivalent? (Ideally it'd be good if this was managed by CSS3 media queries) Edit: Looks like it is supported in Gecko as a media query 回答1: There's no way to accomplish this without resorting to Javascript, at present. As @easwee said, Modernizr is a well-regarded JS library that focuses on

问题 I need to execute doSomethingFunc , when afterPrint happens. My code is working fine on all browsers, except the current Safari-Versions (Safari 10.1 on OSX and the Safari Browser from iOS 10.3). It seems that the event listeners (at least for print) are not called for these two browsers. const mediaQueryPrint = window.matchMedia('print'); mediaQueryPrint.addListener((mql) => { if (!mql.matches) { setImmediate(doSomethingFunc); } }); window.print(); The code above works perfectly with OSX

问题 I am trying to hide a media query from being printed, so I came up with @media not print and (min-width:732px) . But for whatever reason, this (and many variations I have tried) does not display as I would expect in browsers. The only option I can think of is to use @media screen and (max-width:732px) , but I would like to avoid this as it excludes all the other media types besides screen. 回答1: How about something like this? body { min-width:732px; } @media print { body { min-width:initial; }

问题 I've been struggling with this for a while. Basically I have a div (#memberrevealwrapper) that is a specific height unless the viewport is less than 790px in width, then it is another height. (It's a responsive web design) Now, #memberrevealwrapper is animated using jQuery to make it function like a pull tab that comes from the top of the browser upon click and then click again and it rolls back up. Here is my jQuery: <script> $(document).ready(function() { $('#memberloginrevealwrapper')

问题 Can some one explain to me in very simple terms what the operators and , not , only and the comma , mean and do in CSS? 回答1: The four operators implement set theory logic. In that context, here is what each one means: , : equivalent of 'union'; e.g. @media screen, print matches a screen or print device and : equivalent of 'intersection'; e.g. @media screen and (min-device-width: 1920px) matches a screen device with 1920px resolution not : equivalent of 'set difference'; e.g. @media not screen

问题 I have been working on this website and am using media queries to adjust the layout of the view according to the screen size. For the mobile phone size I want to hide the navigation that is already in place and just show a simple "Menu" link that when clicked, displays the Nav Menu. I having been doing research, however I am looking for the simplest way possible with the code that I have. Any ideas would be greatly appreciated. I would like to stay away from javaScript if possible. <nav> <ul>

问题 Randomly a gap is creating at different screen size below two image.I have tried to solve this problem for 2/3 days.But failed every time.Please help me to solve this problem.Related codes are given below image. Problem at midium screen size: Problem at large screen size: HTML: <div class="section-three"> <div class="container-fluid"> <div class="row"> <!---------------------- Left-Area -------------------> <div class="s3-left col-sm-8"> <a href="#"><img src="images/logo4.png" alt="logo"