media-queries

问题 For some reason my media queries do not resize my site correctly when viewing from an iphone or mobile device, i get the tablet version of the site on an iphone. The media queries work fine for tablet and perfectly when shrinking a browser window. Have I missed anything? @media only screen and (min-width: 1024px) { /*styling here*/ } @media only screen and (max-width: 1023px) and (min-width: 740px) { /*Tablet styling here*/ } @media only screen and (max-width: 739px) and (min-width: 0px) { /

问题 A lot of people think that 1em = 16px . This is not true , 1em = value of your browser font-size which is most of the time 16px . While it is not common to change browser default font-size, it is still an easy to change setting. Given this situation, it is still easy to overwrite the em value from an HTML element perspective since it uses the top element's font-size. For example: html { font-size: 20px; } This simple style would cascade down to the rest of the document and 1em would

问题 I want to use a mediaquerie for max-width. It works fine with Chrome but in Firefox it does not, why? jsfiddle code CSS .box { width: 150px; height: 150px; background-color: blue; } @media screen and(max-width: 400px){ .box { background-color: red; } } 回答1: Your syntax is wrong, you need a space between and(max-width) See below @media screen and (max-width: 400px){ .box { background-color: red; } } JSFIDDLE 回答2: There is no closing bracket in your above @media rule - .box{ width: 150px;

问题 I'm trying to hide my menu by default in screens less than 760px wide. For some reason though, my display:none rule is not taking effect. It's being overridden by a previous rule, as follows: media="all" #mainmenu { display:inline-block; } @media screen and (max-width: 760px) .btncontent { display:none; } It's also worth noting that I have a button that jQuery reveals the menu by adding an inline style. The above code is before the button is pressed though, with no inline styles. I'm sure I'm

问题 I have a two/three column layout based on screen size. If window size is greater than 1000 than I need to follow 3 column layout else I need to follow two column layout. I have achieved this using JS but the code is very messy. Now I want to do it using CSS. But I am stuck. Here is JSFiddle : https://jsfiddle.net/7kuah16h/1/ Constants: Child Min Width (148px) including padding child Max Width (196px) including padding If Window Size is 500px (for eg) Child must be 196px each and two column.

问题 I'm working on a site that will make it responsive. Media queries are working on the device it self but on browser resize it's not taking effect. This is my code. Did I missed something? Thanks in advance! @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: portrait) { //Code Here } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape) { //Code Here } 回答1: It's because you are targeting

问题 To optimize our webpages to IE8 we need to add MediaQueryes with respond.js (or other simular solution). But it seems that respond.js (and many simular solutions) require local css files. For example we liked to use the cdn-css for leafletjs, but this will not correct by IE8. Any ideas of how to do this? 回答1: Respond.js actually works if you set up a provide a proxy page for it to reference. See https://github.com/scottjehl/Respond#cdnx-domain-setup and check out the cross-domain example at

问题 I am using the following media queries on my website. <link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1025px)" /> <link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" /> My intention here was to have different stylesheets for different devices. (For now I want to support only desktops and ipads). But when I load the website on my desktop using Firefox (Version 8) or Chrome (Ver: 15.0.874.106)

问题 I have these media queries to apply different styles for iPhone 4 and iPhone 5 /* iPhone 4 (landscape) */ @media only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) { .background img { height: 5px; } } /* iPhone 4 (portrait) */ @media only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait) { .background img { height: 10px; } } /* iPhone 5 (landscape) */ @media only screen and (min-width:320px) and (max-width:568px) and (orientation

问题 I'm trying to have 3 different logo sizes ( small , med , big ) based on different screen sizes. Here's my code: @media screen and (max-width: 487px) { .site-header .site-branding { background-image: url("../images/logo_small.png") !important; } } @media screen and (max-width: 1079px) { .site-header .site-branding { background-image: url("../images/logo_med.png") !important; } } @media screen and (min-width: 1080px) { .site-header .site-branding { background-image: url("../images/logo_big.png