media-queries

问题 Is it possible to create full media query rules on the fly using Javascript or jQuery? I've used numerous media queries to target generalised viewports and specific devices/screens using inline CSS, imports and linked files: @media screen and (min-width:400px) { ... } @import url(foo.css) (min-width:400px); <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="foo.css" /> I can add/remove classes using jQuery: $("foobar").click(function(){ $("h1,h2,h3").addClass(

问题 EDITED: Maybe I should ask which selector sets up the side padding when the screen is reduced to below 480px width? I have been browsing bootstrap-responsiveness.css for a while to locate this but nothing seems to affect this. Original I basically want to remove any default padding or margin set for responsiveness on smaller device screens. I have a background color overridden on container-fluid selector and for larger screen they render perfectly 100% across the width but they the screen is

问题 This question already has answers here : iPhone 6 and 6 Plus Media Queries (7 answers) Closed 5 years ago . According to Apple's site: The iPhone 6 has 1334-by-750-pixel resolution at 326 ppi with 1400:1 contrast ratio (typical) The iPhone 6+ has 1920-by-1080-pixel resolution at 401 ppi with 1300:1 contrast ratio (typical) However, what would the CSS media query responsive breakpoints be for each? (portrait and landscape) I don't fully understand how to test the retina screen sizes using the

问题 I'm working on responsive designed web site using media queries. But i do not know how to take a good width set. As you can see on this table, there is a lot of different resolution even for a single type of device. And as resolution is coming bigger and bigger on mobile device, it is hard to know what design to apply for a specific resolution. For now, I'm using this : Mobile First @media screen and (min-width:720px) => Phablet @media screen and (min-width:768px) => Tablet @media screen and

问题 This might sound like a silly question. If I use this CSS snippet for regular displays (Where box-bg.png is 200px by 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } and if I use a media query like this to target retina displays (With the @2x image being the high-res version); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat top left;} } Do I need to double the size of

问题 I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well. I have established that the best method is to use @media from the CSS3 spec. As such these are my media queries at the minute: @media screen and (max-width: 1000px) { ... } Above is for small desktop and laptop screens. @media screen and (max-width: 700px) { ... } Above is for the iPad and VERY small desktop/laptop screens. @media screen and (max-device-width: 480px) { ... } Above is for iPhone 3GS-

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 3 months ago . I want the image in my site to completely change when the browser is resized. I've been using media-queries, but I can't seem to get it right. Any thoughts/tips? 回答1: In the future please add code you've tried. if it's an image tag you can use a class. Hide the second image on

问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 6 years ago . I've used Zurb Foundation and Skeleton before so I'm familiar with both but I never had to convert an existing website to a responsive website before. Whats the quickest method to convert my website? Using a framework like above, or adding Media Queries for the code already

问题 I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate. Why is the 480x720 (second media query) defaulting to the first media query? @media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} } @media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} } @media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} } @media screen and (min

问题 So imagine I have the following Markup <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> And the following styles (SASS) @mixin max-width($width) { @media screen and (max-width: $width) { @content; } } .container { display: flex; @include max-width(992px) { number: 4; //Hypothetical property that is supposed to