media-queries

问题 The project I am working on consists of a grid showing content. I would like to resize each item on the grid to a fourth of the viewport's size. This would be very easy with Javascript, but there is some backend stuff that needs to be aware of the size of each item: I am using Timthumb to resize the image of item to its appropiate size, so I would need to detect the viewport's width, and send the appropiate value (the viewport's width / 4) to the php that serves each item, so it tells

问题 I had a concern. I'm putting together a little site and for some reason my iphone and ipad media queries are colliding. The Iphone picks up on Ipad styles, but not vice versa. So I wanted to put what I'm using out there and see if anyone can help. thanks guys. @media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone @media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape @media screen and (max-device-width: 1024px)

问题 How can I detect the Motorola Xoom browser with CSS Media? e.g. for iPad, I use @media only screen and (device-width:768px) What is the similar media query for the Motorola Xoom browser? 回答1: @media only screen and (min-device-width: 800px) and (max-device-width: 1280px) { … } See: http://webdesign.about.com/od/css3/a/css3-media-queries.htm 回答2: The screen resolution is 1280x800 , so the width is either 1280 or 800 : @media only screen and (device-width:800px) or @media only screen and

问题 I'm in the process of redesigning my website and I've decided to take a shot at responsive layout. I'm new to CSS3 media queries and can't figure out how to make the site behave as intended on my smartphone. The page has currently this viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> I'm not sure what it does, as I don't see a difference between having and not having this in my HTML, but was told that it was somehow useful. The style sheets are

问题 I want to change the order of two divs. The HTML: <div>container <div> Navigation backwards </div> <div> Social buttons </div> <div> Navigation forwards </div> </div> Looks like this on a big screen: <-- [social] --> I need to change that for small (mobile) devices to: <-- --> [social] Is this possible with pure css? I could just add some HTML and solve it with display: none , but that's an ugly solution imo. 回答1: So @acudars is right... but there's some things to consider here. One thing is

问题 I would like to do this without JavaScript if possible: I will have 2 or more elements on a page that I want to change the order of when the page is a certain size. I am using media-queries and will serve different css based on screen size. Div "a" should be at the top normally, but if the screen size is under 480px then b should be directly over a. <div id="a" class="myDivs">Top when on desktop</div> <div id="b" class="myDivs">Becomes top when under 480px wide screen</div> The CSS that I

问题 I'm working with Bootstrap and LESS on a responsive webpage design. One of the reasons I have enjoyed LESS in the past is because it can keep all attributes for HTML elements together. What I have below is some rules to define a .sponsors block, and then one rule that applies to an element inside that block when the viewport is >= 768px I don't like how that one rule requires a lot of extra code, and how that rule is apart from the rest of the rules. It also feels wrong. What is a better way

问题 My website is responsive. The blog section uses a subdomain pointing to Tumblr, but the cross-domain version of Respond.js isn't working. I'm doing this: <script src="http://www.stevechab.com/scripts/respond.min.js"></script> <link href="http://www.stevechab.com/scripts/respond-proxy.html" id="respond-proxy" rel="respond-proxy"> <link href="http://www.stevechab.com/scripts/respond.proxy.gif" id="respond-redirect" rel="respond-redirect"> <script src="http://www.stevechab.com/scripts/respond

问题 I am using MediaQuery to create a responsive website layout as you will see below, everything works fine apart from one evil problem! core.css is applied to the site by default and it is the style-sheet for the desktop version. But as you can see in this link, when the screen width is 1024px or below it will link to the tablet-and-mobile.css so it applies the tablet and phone styles. <link rel="stylesheet" type="text/css" media="screen and (max-width : 1024px)" href="assets/css/tablet-and

问题 I have this real code to show and hide two divs depending on device type: Problem : in Android the #div-desktop is shown. I need to show only div#div-mobile on mobile devices I need to show only div#div-desktop on desktop devices CSS @media screen and (min-width: 0px) and (max-width: 700px) { #div-mobile { display: block; } #div-desktop { display: none; } } @media screen and (min-width: 701px) and (max-width: 3000px) { #div-mobile { display: none; } #div-desktop { display: block; } } HTML