responsive-design

问题 I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question. Slideshows with images of different aspect ratios display properly on OSX Safari and all other browsers I've tried (even IE8), but not on iOS 5 or 6 using Safari or Chrome. The problem occurs on both iPhone and iPad. I first noticed this in a large responsive portfolio site I'm building for a client and thought it might be related to the unusual configuration

问题 I have set up media query break points as follows: @media screen and (max-width:48em){ /* phone */ } @media screen and (min-width:48.063em){ /* tablet*/ } I got the 48.063em value from some PX to EM calculator (I was told to use em-units for some reason, but that is outside of this question), and it is working ok in firefox, but in chrome, it seems that browser width of 769px falls BETWEEN those max-width / min-width values, and neither is applied to the page. I know this can be fixed by

问题 I'm building a responsive site using Zurb Foundation. I have a PHP script which will resize and caches an image using gdlib if you append a query string with new dimensions in the URL. For example to resize an image to 300px wide: http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300 I am also using some HTACCESS rewrite rules to make this URL pretty and avoid having a query string. So this URL gives the same result as above: http://www.mydomain.com/img/300w/path/to/picture1

问题 I'm new to html and css and I'm trying to create a website, part of the code is here: HTML <div class="apoios"> <h7>      Apoios</h7> <br> <div class="thunnb"> <img alt="" src="http://placehold.it/150x150" /> </div> (...) <div class="thunnb"> <img alt="" src="http://placehold.it/150x150" /> </div> CSS .thunnb { float: left; padding: 10px; width: 150px; height: 150px; } .apoios img { border:1px solid #; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } h7 { font

问题 I'm having a small issue. I am making a site using many banners of same size on identical pages, each one representing a different industry. So its just a matter of replacing images and text. My banner images are part of a "Banner CSS" class, but I don't know how to use different images without copying and pasting my "Banner CSS" class every time. I'd prefer to keep my CSS clean and use one class for all the banners. Every time I try and use HTML to import the photo it either doesn't appear,

问题 I'm thinking about improving the front page of the OpenBSD ports web-site, which lists about 71 categories of the ports. My idea is to use a couple of columns (maybe ul {-moz-columns: 9em;} also with a limit to at most 8 columns at 89em and above, @media (min-width: 89em) {ul {-moz-columns: 8;}} , effectively specifying that there should be at most 8 columns with a minimum width of 9em ), and add some padding / margin to each list item listing a port, but on bigger screens, this might occupy

问题 I really love the simplicity and ease of manipulation of grid-template-areas , but is there an easier way/shortcut to indicate an area spans multiple columns (say 12) — within the template? This starts to get pretty gross when you have 12 columns... .wrapper{ display: grid; grid-template-areas: "nav nav cont cont cont cont cont cont cont cont cont cont"; @media all and (max-width: 839px){ grid-template-areas: "nav nav cont cont cont cont"; } } 回答1: You can combine it with grid-template

问题 Responsive navigation hidden on window resize. Hi all I have a demo here http://www.ttmt.org.uk and jsfiddle here http://jsfiddle.net/VCPJu/ It's a simple horizontal li list navigation, on window resize the navigation hides and a menu button shows. Menu button then slides down the navigation that is now vertical. If I make the window smaller open the slide down menu and resize the window bigger the navigation returns to the horizontal menu. My problem is if I make the window smaller open the

问题 I am trying to set percentage for 2 div elements(main and header) contained in the body of html. The problem is that this is not working(the height percentages appearing are wrong) when my screen orientation is portrait. Examples dimensions i am checking are the below: 320x480 320x568 600x800 768x1024 800x1280 I use viewport resizer to check my code. HTML code: <body> <header> <div id="title"> Just a title </div> </header> <main> Main div element here </main> </body> CSS code: html, body{

问题 My Ruby on Rails site has a responsive design. Can I write tests for visual regressions? For example, my site fits in an iPhone 5's viewport without horizontal scrolling. If offset-x: hidden isn't set, and I unintentionally extend the width of an image past the viewport, my site will have horizontal scrolling (pictured below). This is undesirable. Does a visual regression test method such as assert_horizontal_scroll(0) or assert_page_width == "480px", :viewport_width => "480px" exist? +------