responsive-design

问题 I am making my own responsive navigation from this tut: http://www.hongkiat.com/blog/responsive-web-nav/ This is my fiddle: http://jsfiddle.net/2Pqch/ When window is minimized and you press the open/close btn I would like to be able to close it either by clicking the button or by clicking outside the nav. How can this function be added? Here is the script: $(function() { var pull = $('.btn'); menu = $('nav ul'); menuHeight = menu.height(); $(pull).on('click', function(e) { e.preventDefault();

问题 I'm developing a web app with AngularJS 1.x and Angular Material. I'm trying to create a landing page with a large title at md-display-4 . Here's what it looks like: As you can see, the title fills the page nicely and fits in one line. However, this is on a 1680x1050 monitor. If I move the browser window to my smaller 1366x768 monitor, I get this instead: As you can see, the font stays the same physical size and overruns to the next line, and also is no longer centred. How can I ensure a

问题 I'm trying to troubleshoot a page that was created by someone else, and have never used flexbox before. It is a 3-column layout that stacks perfectly in when resized in Firefox or Chrome but when viewing in Safari on desktop or iPhone the elements don't stack. The first one seems to get hidden under the second, and the third remains to the right, outside of the content area. I found a similar topic and added the viewport code in the head but it still doesn't work. I've tried several different

问题 I'm finishing my website and everything works perfectly except for one little thing. When I'm using my iPhone, the portrait mode is exactly as I want it, the problem is the landscape mode. I is like I've design it, but I don't like the final version... So I need to insert another line of code, but I don't know how to do it... This is the one I have right now <meta name="viewport" content="width=device-width,initial-scale=1"> Now I need one just for the landscape mode. I want this one ^ to

问题 i create this slick slider. Someone could help me to fix the responsive breadcrumbs? slick-content-slider slick-initialized slick-slider take a strange height ... What i want to create is that every div remain on the same line . Thank You in advance ! $('.slick-content-slider').slick({ slidesToShow: 4, slidesToScroll: 4, arrows: true }); .slick-content-slider { margin: 0 2.5%; width: 95%; } .content-slide { background: #333; color: #fff; height: 100px; line-height: 100px; margin: 0 10px 0 0;

问题 I am trying to make a responsive triangle for one border, which will be visible only on hover . I tried the below code but it doesn't work because it uses static border-width . When I have one-string (single line) link it's perfect, but when strings more (more than one line), it's failing. Example here Code here: <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum dolor sit amet</a></li> </ul> SCSS here: ul{ width:120px; li{ list-style

问题 I have a responsive layout with a grid of content blocks. on desktop each row is 4 blocks on tablet each row is 3 blocks on phone each row is 2 blocks I want a horizontal line to run between each row of blocks on all sizes. At the moment I have a border bottom on each block but the line doesn't extend the full width of the page if you have an empty space (eg 3 blocks on a 4 column grid) The only way I can think of doing it is to wrap each row in a container using JS and reload that function

问题 I've got a couple of elements that I'm really struggling to align horizontally. I've got a JSFiddle example to try and illustrate it. The layout that I'm trying to achieve in particular is looking at the first/left most Email field. I wish to have both the slider and input field aligned with the label if space, or both of them sitting below the label otherwise. What I find however is that I end up with the controls wrapping, or large amounts of whitespace (or greyspace even) around the

问题 For determining screen size I'm using media queries but I want determine if a device is in portrait or landscape mode using CSS so that I can have different background image as per screen size. Any thoughts? 回答1: simply write media queries for landscape and portrait modes: /* Portrait */ @media screen and (orientation:portrait) { /* Portrait styles */ } /* Landscape */ @media screen and (orientation:landscape) { /* Landscape styles */ } link here 来源： https://stackoverflow.com/questions

问题 To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes. My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it. Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p. Many responsive websites use media queries to display a CSS