media-queries

问题 I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices. This is what I have: //Source code <div id="signinbutton" class="blue_button">Sign In</div> //desktop.CSS .blue_button { width: 130px; height: auto; padding: 8px;

问题 I'm attempting to remove my background image when people view the site on mobile devices. Here's my code. HTML: <section id="Build"> <div class="img_contain col-xs-8"> <img src="assets/images/RockS_BG.png" "> </div> <div class="column-right col-xs-4 "> <h1>Build</h1> <p> BLA BLA BLA </p> </div> </section> CSS: #build { background-image: url('../images/buildbg.png'); margin: 0 auto; text-align: left; padding-top: 40px; background-color: #D89330; } Is it possible to hide a background image

问题 i developing my first hybrid app using html5+JQueryMobile + Phonegap...i'm testing the app on a Samsung w (android 2.3.3), on a Iphone 4s and on IphoneSimulator for the Iphone5... in the home page i'd like to use different background images for this devices...i'm trying to use the CSS Media Querys... /* IPHONE 4 - IPHONE 3*/ @media screen and (height: 480px) { #home { background-image:url(images/home/home_Med.png); background-size: auto 100%; } } /* GALAXY S1 - S2 */ @media screen and (width:

问题 I have been dealing with an issue with min and max width usage in the last few years with websites I am developing for the company I work for. Though I can easily get around this by just changing the breaking points, it annoys that I don't know why it is happening and I keep walking into this issue after the websites have had some modifications. So the issue is probably most know for the non-100% gap. This issue though is not related to screen zoom but rather just a breakpoint that isn't

问题 Since Boilerplate has respond.js built-in, it should in theory be able to support following css: @media only screen and (max-height: 580px){.rnd-class{:height:200px !important;}} In FF and Chrome, it works as expected and the custom styles kick in after resizing the browser window. However, in IE8 the custom styles are always enabled - no matter how big the current browser window is. I was thinking that the problem is inside my code somewhere, but than I visited the Boilerplate mobile

问题 Many similar questions have been asked here before. I believe mine is slightly unique. I have developed a mobile app with JQM + Cordova/PhoneGap. Originally I used big images (targeted towards retina display devices) and used responsive css to scale image down as needed. The problem with this approach that older devices end up having to download big images and these devices would not have the same processing 'grunt' that newer retina devices have - causing unnecessary overheads. I decided to

问题 This might be basic but I'm getting lost in all the solutions I've managed to find on the web. I have a running website (www.webstalab.com) based on Twitter Bootstrap 3 but the image used (depicting two statues holding a ball) is quite big in size (around 900kb) therefore loads way too long on slower internet connections. The present photo is 1920 pixels wide, is responsive and it is not a background image. (I couldn't achieve the desired layout with the background image approach). All I want

问题 We're trying to target the Samsung Galaxy Nexus specifically. It has a resolution of 1280 x 720 with a pixel density of 2, which causes it to display pages as though it were a desktop device. We've tried @media screen and (max-device-width : 720px) and (-webkit-max-device-pixel-ratio : 2) and (portrait) {}; and @media screen and (max-device-width : 720px) and (-webkit-max-device-pixel-ratio : 2) {}; as well as a variety of other combinations. We can't seem to target this device specifically

问题 It seems that Firefox and Webkit browsers measure different things when using a max-width media query. While investigating breakpoints for a responsive design overhaul, I found that Chrome will include stylesheets at the expected width, but Firefox always included the sheet at a narrower than expected width. For example: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" media="screen and (max-width: 480px)" href="/480.css" /> I would expect the width

问题 I have an SVG, in which some elements are rotated depending on a mediaquery, like this: @media (max-width: 480px) { rect { transform: rotate(10deg); } } The element rotates just fine, but (at least in Chrome) it refuses to go back. Why is that? Other directives, such as fill, work in both direction. JSFiddle: http://jsfiddle.net/MM3VC/1/ 回答1: I'm not sure why it doesn't rotate back but you could try this which goes back when the viewport gets wider rect { -webkit-transform: rotate(0); -moz