media-queries

问题 Im trying to get this piece of CSS working on my ipad but it seems to be ignoring the media query and using the default wrapper CSS instead. is there a way I can stop this from happening? @media only screen and (max-width: 1024px) and (max-height: 768px) { #wrapper { position:absolute; z-index:1; top:41px; width:150px; height:300px; } } #wrapper { position:absolute; z-index:1; top:41px; bottom:0px; left:0; width:100%; height:800px; overflow:auto; } 回答1: Aren't your media query styles being

问题 Im trying to make my website responsive, however Im having a little problem. It works fine on my browser. If my browser is full screen then it looks how it should, and if I make the browser smaller then the media queries work perfect. However if i then load onto a samsung galaxy S3 or ipod touch, it does not. It looks like the regular website, only crammed in smaller to fit the screen. It does fit 100% of the screen, however hot at all like it should. I have searched through here for an

问题 I have not been able to get IE mobile to stop automatically resizing my site design. I am using three stylesheets with media queries to display the site differently on different device screens. I've included the meta tag so it shows the mobile stylesheet on IE mobile but it keeps setting the viewport at 320X480 instead of using the actual size of 480X800. How can I force it to display at the actual screen size instead of scaling for a smaller resolution? 回答1: IE Mobile interprets width=device

问题 I am trying to have various effects on different breakpoints. Primarily what I am trying to do is when a category is clicked from the category list within 720px the category list should fade out and data should be revealed in that place but when the width goes beyond 720px , the category list shouldn't fade out instead reveal the data in another div . For now am logging responses in console. PROBLEM Whenever the page loads in a particular width, click is not performed but once I resize the

问题 I've got a devices stylesheet that is loaded to deal with responsive design in a website, but I'm struggling to group a couple different media queries exactly how I want. I've got a shared set of styles for a small web window, a mobile device at any rotation and an iPad in portrait only. At the moment I'm getting everything except the iPad with this query: @media all and (max-device-width: 480px), all and (max-width: 480px) I'm getting the iPad in portrait with this code: @media only screen

问题 I am displaying the wordpress posts on my blog index page in a masonry layout. I also have the masonry activated on footer, to display the wordpress footer widgets in a masonry layout. So basically I have 2 masonry containers on the same page . 1. One for displaying the blog posts, and 2. Other for displaying the footer widgets. The html markup for the page looks like this: HTML <!-- Posts --> <main id="main"> <div class="testmason"> <article class="hentry">Post 1</article> <article class=

问题 Hi so I have a media query that gets picked up by ios simulator <link rel="stylesheet" media="all and (max-device-width: 480px)" href="css/iphone.css"> What I would like to do is simulate this on firefox or chrome by resizing the browser, is this possible? 回答1: <link type="text/css" rel="stylesheet" href="css/iphone.css" media="all and (max-width: 480px)" /> 回答2: You need to use max-width . max-device-width is the physical screen size so that won't change. See: What is the difference between

问题 I dunno if its right to post a similar question to a previously closed one. Its quite different so I thought I'd try. Ok, *-device-width is to target devices (not rendering area) with a specific width. *-width is to target the rendering width. So when designing, won't I always want to target based on rendering area, if the device width is say 768 but the browser chrome (for example) takes up 20px of that, then won't scroll bars appear if I use *-device-width . So question is shouldn't I use *

问题 Using calc() in a media query in Chrome (version 68) seems to replace viewport units with px . Eg @media only screen and (min-height: calc(100vw + 10px)) results in @media only screen and (min-height: 110px) Firefox handles it correctly and IE, Edge and Safari which doesn't support calc() in media queries (according to mozilla) seems to ignore the query which is better for my use case. How can I apply the media query + calc() in the browsers that properly supports it? Should I expect Firefox

问题 I would like to write a CSS media query that matches all devices with at least a 800px width and 800px height. The purpose of this media query is to target tablets and exclude phones. I do not need to worry about desktops in this case, since I am only targeting mobile devices. I started with: @media all and (min-device-width: 800px), all and (min-device-height: 800px) ...but I don't believe that will work because it will be true if either of the two conditions are met (logical OR). So my next