media-queries

问题 I'm using bootstrap 3.2 and the default breakpoints. I would like the navbar to collapse into mobile mode at md (< 992px) instead of sm (< 767px) without changing the default breakpoints. How do I do that best? 回答1: You have 3 options: Edit the files manually - a horribly laborious task and not recommended. Visit http://getbootstrap.com/customize/, specify your own breakpoints there and download the customised version. Use a CSS preprocessor and customise it at your end. Bootstrap provide

问题 I have a situation and I decide to use media queries . The html code: ... <span class="logotext-n">n</span> . . <span class="logotext-u">u</span> ... Css implementation: ... @media screen and (-webkit-min-device-pixel-ratio:0) { .logotext-n { color: #f1ecd6; font-family: "arial black", sans-serif; font-weight: 900; font-size: 210px; text-transform: lowercase; letter-spacing: -18px; } } . . @media screen and (-webkit-min-device-pixel-ratio:0) { .logotext-u { color: #f1ecd6; font-family: "arial

问题 I know that @media can be used to detect properties of the whole viewport, and then switch among CSS rule sets based on different types of media/widths, etc .. But how does one switch between CSS rules based on the width of parent div , etc ? This code preview shows the footer of my page, with some elements changed/removed: Liveweave: http://liveweave.com/JtUxpF (Switch to Split V or View mode from the top menu) On the right side of the footer, there is a small form ( marked with the red

问题 I'm designing a website with media queries. I started width @media screen and (min-width : 320px) and (max-width : 479px) screen codes. But there is a problem when I test it with my phone. There is a white space right side. My web site is http://zinzinzibidi.com/TurkAntivirusResponsive/Anasayfa And you can test it here http://www.responsinator.com/?url=zinzinzibidi.com%2FTurkAntivirusResponsive%2FAnasayfa or here http://www.browserstack.com/responsive 320x480 resolution Here my CSS codes http

问题 Hi guys so I'm having this problem where images at the bottom of my website are being stretched vertically in chrome between @media only screen and (min-width: 401px) and (max-width: 960px) I believe it has something to do with the .bottomsection css style rules. Since when I remove them the images are scaled normally, however my .sign-up div no longer scales to the same height as my Karl Marx photo. My layout does appear to be working in Firefox/edge i just cant get the layout to work in

问题 I've been using the following code for my responsive image replacements: //HTML: <img id="testimage" onLoad="minWidth32('test_image')" src="testimage_small.jpg"> //JavaScript: var screencheck = window.matchMedia("(min-width: 32em)"); function minWidth32(imageName) { if (screencheck.matches) { currentImage = document.images[imageName]; currentImage.src = imageName + "_large.jpg"; } } (edit)New streamlined version of JavaScript: var screencheck = window.matchMedia("(min-width: 32em)"); function

问题 This is the website I am working on. http://ankursinha.net/TestSite/index.php It's stacking up properly, it's responsive, everything is fine apart from the following. When I visit this site from my phone or tablet, the navbar shows 3 lines, I click that and all the links show up, and then when I click the "LOGIN", it drops down and shows me Faculty Log In and Student Log In, but when I click one of these, it toggles and closes the dropdown thing. I know this is happening due to: data-toggle=

问题 I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: iPad, iPhone)? @media only screen and (min-width : 1824px) {} @media only screen and (min-width: 1200px) and (max-width: 1823px) {} @media only screen and (min-width: 992px) and (max-width: 1199px) {} @media only screen and (min-width: 768px) and (max-width: 991px) {} @media only screen and (max-width: 767px) {} @media only screen and (max-width: 480px) {}

问题 This is driving me crazy, I cant seem to find a problem with the media queries but it doesnt work in any browser besides mobile safari on ios 7 and chrome. I assume that it is some crazy syntax error but again, I cant find anything. BTW, the media queries are all in their own file (mediaqueries.css) and linked on the bottom of all stylesheets. @media screen and(max-width: 1100px) { #bottombar ul li{ margin-right: 24px; } } @media screen and(max-width: 1030px) { #bottombar ul li{ margin-right:

问题 I have created a website using Bootstrap 3 and media queries. This is my basic .css media query setup, using the mobile first approach. /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only