media-queries

问题 Given the following link tags: <link rel="stylesheet" href="xlarge.css" media="max-width: 70em" /> <link rel="stylesheet" href="large.css" media="max-width: 60em" /> <link rel="stylesheet" href="medium.css" media="max-width: 50em" /> <link rel="stylesheet" href="small.css" media="max-width: 40em" /> <link rel="stylesheet" href="xsmall.css" media="max-width: 30em" /> <link rel="stylesheet" href="retina.css" media="(-webkit-min-device-pixel-ratio: 2)" /> On initial load, are all six of these

问题 I'm working on a responsive site where each page will have a large hero image, defined in the CMS. I'd like to avoid having to download that background image on mobiles. The only way I can think to do it is to have some inline CSS in the head of the page like so: <style type="text/css"> @media only screen and (min-width: 680px) { .hero-image { background-image: url(../images/image.jpg); } } </style> First, can I use media queries in inline CSS? Second, will this avoid downloading the image on

问题 I would like to use modulus to apply a CSS class to a grid of images in two different situations: Situation 1 I would like to apply a CSS class to all middle images indicated by the *. I cannot simply use nth-child as I do not know if there will always be 9 images in the grid. Sometimes there could be 5, sometimes 7, sometimes 8, etc...it's variable. [Img 1] [Img 2*] [Img 3] [Img 4] [Img 5*] [Img 6] [Img 7] [Img 8*] [Img 9] Situation 2 I would like to apply a CSS class again to the images in

问题 I have a page, I want to be it look like this in mobile. But when I open it in mobile it is like this. How to do that so that it is auto zoomed. Note: If the user tries to zoom out & zoom in it should not work. 回答1: Use CSS media queries and set the wrapper in (max-width: /*your desired viewport*/) and control the width and font-size of your wrappper. https://www.w3schools.com/css/css_rwd_mediaqueries.asp If you don't want users to zoom in, use this meta viewport <meta name="viewport" content

问题 I am using media query to target iphone/ipad/mobile. I have written the following media query. But my problem is if i write css in media query of mobile 'max-device-width : 480px' it will also apply to iphone. Is i am doing wrong ?? For mobile : like samsung grand(480 * 800): @media only screen and (max-device-width : 480px) { } For iphone: @media only screen and (max-device-width : 320px) { } For ipad: @media screen and (min-width:760px) { } Also added meta tag: <meta name="viewport" content

问题 I have tried the different combinations of width & device-width but on the iPhone in landscape this code never turns the background red; I am having problem when I have more than 1 media query. See this JSfiddle example the div background is never green unless you remove the last media query This is what I would like 3 different media queries which target: both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout width: 320px - 479px -

问题 I have tried the different combinations of width & device-width but on the iPhone in landscape this code never turns the background red; I am having problem when I have more than 1 media query. See this JSfiddle example the div background is never green unless you remove the last media query This is what I would like 3 different media queries which target: both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout width: 320px - 479px -

问题 I'm working on a small project based on Boostrap 3 (html5boilerplate custom build) and trying to use the "official" media queries in the boostrap documentation: /* Extra small devices (phones, up to 480px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md) { ... } /* Large devices (large desktops, 1200px and up) */ @media

问题 Vaguely related to this question, but not quite the same. I'd like to target Chrome ONLY, without targeting Safari. I used the following media query, but it targets both Chrome and Safari: @media screen and (-webkit-min-device-pixel-ratio: 0) { h1, h2 { font-weight: bold; } } Chrome does a great job at rendering the header elements in bold even though a bold version of the font I'm using doesn't exist. Safari... not so much. Hence the super specific targeting. For reference, the font is Cody

问题 I've got the code below. What I would like to achieve is to switch between styles of a mobile device changes orientation from portrait to landscape (devices that have a large resolution like iPhone 4 or Galaxy S) <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <title>KUBIK</title> <style> #mobile, #tablet { display: none; } @media screen and (max-width: 767px) { body { background-color: #FF0000;