responsive-design

问题 Is there a way to work with site and instantly see how it looks on multiple devices? For example, You have two monitors, and You open 3 browser windows of different sizes (PC, Tablet, Phone). PC version is the main version and You work with it on the main monitor, and just time from time look Tablet and Phone versions on the other monitor. You click on link on PC version and go to new page, two other do the same. Is there any tool to do that? 回答1: For testing responsive web design, I use web

问题 I have created this sort of ecommerce website, with the aim to be visualized on a mobile phone web browser (possibly with an acceptable user experience on tablets/pcs/tvs also). Yes, an awkward tempt of responsive web design: http://rosposhop.herokuapp.com As you can see, I used http://getbootstrap.com/ v. 3.x and I apologize in advance for my enormous ignorance on CSS. Mhh... I developed initially the site with a mobile handset in mind, and mainly the site do pretty wath I want in portrait

问题 Using bootstrap 3 I have some questions about push/pull with column ordering. Here's what I am after: I have this code: <div class="col-xs-10 col-sm-3 col-md-2"> Column 1 </div> <div class="col-xs-10 col-sm-3 col-md-2"> Column 2 </div> <div class="col-xs-10 col-sm-3 col-md-2"> Column 3 </div> <div class="col-xs-10 col-sm-9 col-md-4"> Purple box. </div> <div class="col-xs-2 col-sm-3 col-md-2"> Orange box. </div> If I add the pull modifier class to the purple box for sm/xs and push to the three

问题 This question already has answers here : Center parent div with float children (4 answers) Closed 2 years ago . I am trying to create a responsive grid. I have a 'parent' div which contains floating children. Depending on the page width a variable number of children is shown per 'row'. The children should be centered. To get the 'parent' div to fit the children I set display:table on the parent div. Please see the following fiddle: http://jsfiddle.net/dwjbosman/cXuQ6/5/ css: .page {

问题 Added this line in index.html: <link href="css/style.css" media="all "rel="stylesheet" type="text/css" /> And this is my Media Query CSS: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #mapArea .white span { width: 100px; } } But when i check it in browser, don't working. What's my problem? How can i fix it? (Tested all modern browsers) 回答1: @media only screen has different definition with @media screen

问题 With either media queries or jQuery, I'd like to change the HTML markup. I'm not sure what is the best option. My current HTML markup: <ul> <li> <div class="item-1">.....</div> <div class="item-2">.....</div> </li> <li> <div class="item-1">.....</div> <div class="item-2">.....</div> </li> </ul> For mobile portrait orientation, I'd like to keep a single <div> within a <li> so that the original 2 <li> s are converted to 4 <li> s as below: <ul> <li> <div class="item-1">.....</div> </li> <li>

问题 was wondering if anyone would be able to help me figure out a better way to make my site more responsive to people actively changing their browser size. The reason for this, is it will be accessed through the EVE online in game browser, and people resize many times to see the other UI elements on their screen. Here is the code I am trying to get work: http://jsfiddle.net/yKVq4/42/ and here is my solution: CSS: * { margin:0; padding:0; -moz-box-sizing:border-box; } body { background:#000000

问题 I implemented concept of responsive design but now we face a issue. The content seems to be fit in nicely inside the frame. I've used max-device-width and so on. My font-sizes all use a fix sized pixels that is 12px and so on. Now when I gave it to my client he complains it looks super tiny on iPhone. I don't actually have an iPhone to test the designs. Is there anyway to test it without using the actual device? a simulator or something? I tested it on Chrome by resizing the browser window

问题 I got a task where I have to rewrite an old Adobe Flex application in HTML, CSS, JavaScript. It is an application for customers to demonstrate our product with several images (images on images, so let's say we have png files for background, house and stickfigures) and the images change based on interaction with the user. For my example let's just have a background and two stickfigures. The background should always take 100% of the width. As we resize the browser the stickfigures should stay

问题 I'm building a responsive website and I'm having a problem with it which means that when I view it on a mobile, it's automatically zoomed in by a small amount. I can zoom out to view the whole width of the page, but when I click on a link to another page, the new page loads in slightly zoomed in as well (maybe by 10% or so). I've set an appropriate viewport which should deal with the problem: <meta name="viewport" content="width=device-width, initial-scale=1" /> I also have set a minimum