responsive-design | 易学教程

jQuery: Disable & Enable Plugin based on browser window size?

阅读更多关于 jQuery: Disable & Enable Plugin based on browser window size?

问题 I've got the following code to add a function depending on browser size, but how do I remove the effects of this plugin if the browser is resized? (Currently it only works if the page is loaded at the specific size, not if it's resized) $(document).ready(function(){ $(window).resize(function() { if ($(window).width() >= 420) { // Enable the plugin to make the tab functionality... $( "#tabs" ).tabs(); } else { // Code needed to completely disable the tab functionality?? } }); }); 回答1: I

Detect support for meta viewport scaling

阅读更多关于 Detect support for meta viewport scaling

问题 Is it possible to detect whether the browser will scale the website based on the meta viewport element? 回答1: There isn't any JavaScript method to detect if the meta viewport will be applied. However, you can check if it was applied via two step process with inline js in the head, with an approach such as: <head> <script> var clientWidth = document.documentElement.clientWidth; </script> <meta name="viewport" content="width=device-width,initial-scale=1"> <script> if (clientWidth !== document

Responsive site image issues

阅读更多关于 Responsive site image issues

问题 If you take a look at the site: http://cornerstonecastings.com It's one of my first responsive sites, and it's built with Wordpress. The problem I'm having is with the responsiveness of the images on the site. If you resize your browser (I'm using the latest Chrome) the images will adjust and shrink accordingly, as they're supposed to. But when viewing the site from my iPhone's Safari (or Chrome iOS for that matter) the images adjust horizontally, but they stretch and get distorted vertically

How to make responsive Google-adsense ads scale on resize?

阅读更多关于 How to make responsive Google-adsense ads scale on resize?

问题 I am using google adsense responsive ads (with Bootstrap) and it works properly on page load. Also in a hand-held device it detects the orientation properly and adjusts the ads immediatly. However, when I resize my browser it does not react to it. Weird to claim responsiveness when there is no build in system to detect screen resize. I have thought to add an eventlistener, but is this a good work around or will it break? I also thought of loading in different ad sizes with a few break point

positioning nav bar at the bottom of the viewport which also always remains at the bottom of the div

阅读更多关于 positioning nav bar at the bottom of the viewport which also always remains at the bottom of the div

问题 There are 3 divs, 1st div has a logo and 2nd one has slider in it and 3rd div is navigation, I want my navigation div to be fixed at the bottom of the viewport which becomes sticky when it reaches the top. I achieve this with this code. nav{ position:absolute; width:100%; height: 56px; background-color:#ffffff; bottom:0px; display:block; border-bottom: 1px solid #ededed; background: #FFF; font-family: 'Cinzel', serif; font-weight:600; font-size: 10px; line-height: 1.5; letter-spacing: 2px; }

CSS media query not applying

阅读更多关于 CSS media query not applying

问题 I'm using this media query in my main css stylesheet and it doesn't seem to be working. @media only screen and (max-device-width : 768px) { .small { display: block; } .big { display: none !important;} } In the web inspector it doesn't even show up as a rule, however when i look in the sources panel the query is obviously there. So i'm not sure what the problem could be. I am trying to target devices with a width less than 768px. Here's how i'm linking to the stylesheet, if that matters <link

Foundation 6 data-responsive-menu parameters

阅读更多关于 Foundation 6 data-responsive-menu parameters

问题 I'm building a responsive navigation with foundation 6, integrated in wordpress. I'd like to use data-responsive-menu attribute in order to trigger the drilldown plugin on small screens. Easy. The problem is that I don't want any of the other plugins on the other screen sizes. The documentation gives this example: <ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown"> But this trigger drilldown plugin on small screens and dropdown on bigger ones. If I use only "drilldown"

How can I create a CSS border on a diagonal element

阅读更多关于 How can I create a CSS border on a diagonal element

问题 Here is an example. http://jsfiddle.net/52c7t/ Simply: I'm trying to get the div on the right side, to have a border like the div on the left. (I'd want the border to be on the left side of the right div) I tried a million different combinations and haven't been able to do it. I was trying to avoid making an image and do this with css. Thanks for your help! UPDATE: Image of what I mean. Sorry about my graphic design skills :P http://i.imgur.com/pGSnL.png HTML <div id = "top_bar"> <div id="top

Responsive triangle div

阅读更多关于 Responsive triangle div

问题 I'm trying to create a responsive triangle div which will sit at the top of the page as a header. I was able to achieve that with the following code: div{ width: 0; height: 0; border-style: solid; border-width: 200px 400px 0 0; border-color: #007bff transparent transparent transparent; } <div></div> The problem is that I want this triangle to be responsive to the width of the page and change proportionally in height as well. I tried setting width and height to percent based, however that

Chrome float right resize bug?

阅读更多关于 Chrome float right resize bug?

问题 I have an input and a button in a div. When the viewport is wide, the button is floated right and on small screens the button fills the width of the viewport. However, in Chrome when I resize the browser to smaller than the breakpoint and then back again the button stays on its own row. It works as I expect on IE and FF. If I set float: left on the input it works in Chrome too. Here's a fiddle demonstrating the issue: http://jsfiddle.net/kSRvP/ Resize the output pane back and forth to see the