media-queries

问题 I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file. I would just like to clarify that I have the media queries set up correctly before I change out all my background images. I have doubled the size of all my background images and perfixed them with the "@2x" naming convention. e.g icon-user@2x.png . I have added a jQuery function into my code to swap out the images with the CSS class of hires . In my CSS document I have a normal CSS

问题 I'm currently using CSS media queries to target some small/medium screen devices like this: @media screen and (min-device-width: 480px) { ... } @media screen and (min-device-width: 720px) { ... } This works as expected, and I can apply styles to some particular selectors, but.. What I was wondering is if there is a way to add a class or other attribute to a selector based on media query. Example of my thought: @media screen and (min-device-width: 480px) { body { addClass('body-iphone') } } Is

问题 This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 6 years ago . The site I'm currently working on isn't picking up my styling for devices under 480px in chrome but is working in firefox, chrome is picking up the media

问题 <link href="css/mobile-large.css" media="all and (min-width: 481px) and (max-width: 760px)" rel="stylesheet" type="text/css" /> Shouldn't that line of code do so that the stylesheet "mobile-large.css" be loaded when using a Samsung Galaxy Nexus with 720px in width? However it doesn't so what is the reason and how do I fix it? I am using this too: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 回答1: May be you have to define device-width instead of

问题 I'm using Twitter Bootstrap, with jQuery. According to the bootstrap docs, if you want the collapsible element open as default you add the additional class "in". And if you want the collapsible element collapsed as default you style the height to 0px. That all works well and good. I would like to use a Media Query to set the element open as default on large screens, and collapsed as default on small screens (and then click to toggle on both)... My HTML: <div class="accordion" id="accordion1">

问题 I'm kind of new to coding with media queries, and I think I have painted myself into a corner, using too many media queries (and probably in the wrong way). What I want to do is to hide some page elements when the width of the screen or device is smaller than 481px. So in the screenshot below, you might be able to see the couple of lines of text in the upper right corner. My problem has to do with the media queries that I've used. I am at wit's end to figure out (1) why the page elements

问题 I have not been able to find a definitive definition of what initial-scale=1.0 and initial-scale=2.0 means. What do they both mean? I know initial-scale has to do with the zoom, I just don't know what it's values from 1-10 mean. Source: https://www.w3.org/TR/css-device-adapt-1/#translate-meta-to-at-viewport 回答1: A usual mobile responsive site would contain a HTML meta tag in the head like the following: <meta name="viewport" content="width=device-width, initial-scale=1"> Within the tag the

问题 Can we use the ">" or "<" symbols(Greater than and Less than ) in media queries? for example I would like to hide a dive for all monitors less than 768px. can I say some thing like this: @media screen and (min-width<=768px) {} 回答1: Media queries don't make use of those symbols. Instead, they use the min- and max- prefixes. This is covered in the spec: Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints. This

问题 I have a responsive website and I need some PHP conditions depending on the windows width (or media queries). Example: if ($window_width > 1400px) { echo 'Your window is wider than 1400px'; } elseif ($window_width > 1000px) AND ($window_width < 1399px) { echo 'Your window is between 1000px and 1399px'; } else { echo 'Your window is narrower than 1000px.'; } Thanks for your help! 回答1: check this Goolgle Mobile Detect Try to use http://www.php.net/get_browser and check for isMobileDevice field.

问题 I have this page which is actually rendered fine in all browsers, meaning.. when browser is contracted, to show mobile version of the layout, based on @media query css settings, but not in IE8, as far as I can check. How do I get around of this problem. Here is all the code btw: <html> <head><style> body{margin:0px; padding:0px;} #a{height:150px; background-color:#ffffff; border-bottom:1px solid #CCC;} #x{min-height:350px; margin-top: 10px; background-color:#CCC;} #y{min-height:30px; margin