responsive-design

问题 I just want to make a research that concerns responsive web design. Don't treat this question like a problem that must be solved. It's just an experiment :) Sometimes we need to combine percentage and fixed values for dimension calculation especially when it comes to create some responsive layouts. As far as I'm concerned I've found four ways to achieve the desired effect in pure CSS. Problem Let's have a quick look on the problem - we need to create a three column layout stretched to the

问题 How to make a responsive google map from the code <div class="map"> <iframe>...</iframe> </div> I use in css for full map .map{max-width:100%;} and small device .map{max-width:40%;} but it didn't work. Anyone have idea? Thank you. 回答1: Add this to your initialize function: <script type="text/javascript"> function initialize() { var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // Resize stuff... google.maps.event.addDomListener(window, "resize", function() {

问题 By default I want to give my body element a green border. On a device that supports retina display I want to check for size first. On an ipad I want to give my body a red border and on an iphone I want to give it a blue border. But nesting media queries like so doesn't work: body { border: 1px solid green; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (max-width: 768px) and (min-width: 320px) { body { border: 1px solid red; } } @media (max-width: 320px) {

问题 I am trying to optimize the size of my site when it is being outputted to the client. I am down to 1.9MB and 29KB when caching. The issue is that the first load contains an image which is very unoptimized for mobile devices; it has a 1080p resolution. So I am looking for a method that allows me to first load a low-res version ( min.bg.jpg ) and once the site has loaded, use a high-res version - or even one with a resolution close to the device being used ( NNNxNNN.bg.jpg or just bg.jpg ). The

问题 Generally, what markup and CSS will create an element with a percentage-based height in a responsive design? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? shows how to create two 100% height columns, but this breaks for heights < 100%. Specifically, I have a sidebar div with a list of items, which may be short (empty) or long ( overflow: auto ). But because no parent elements have a fixed height, height: 20%; does not work. How can I give the sidebar a fluid height

问题 In today's web development community, It is almost 'standard practise' to make a website "fully responsive" - meaning it would work on all screen sizes. I currently have a website that is designed for a set width and height of 900 * 600px. However, I would like to alter this in such a way that I can make it mobile responsive, without loosing its functionality. I was looking for some 'industry standard' concepts in which I could adapt to this purpose, although I am at a slight loss as to how

问题 The srcset attribute of the img element helps authors adapt their sites for high-resolution displays, to be able to use different assets representing the same image. The picture element helps authors to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format. Both these give the author control over displaying images based on the device resolution;thus making the images responsive. So what is the main difference between

问题 I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view. What could be the wrong? 回答1: You are probably missing the viewport meta tag in the html head: <meta name="viewport" content="width=device-width, initial-scale=1"> Without it the device assumes and sets the viewport to full size.

问题 i want to design a web site.but tell me what are the sizes i can use for responsive website design. that sizes must contain for mobile,tablets,pcs and other devices.. i want to use them in media queries.. :D EX for Mobile: @media only screen and (min-width: 500px) { } EX for Tablet: @media only screen and (min-width: 800px) { } Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D like that i want to know

问题 i want to design a web site.but tell me what are the sizes i can use for responsive website design. that sizes must contain for mobile,tablets,pcs and other devices.. i want to use them in media queries.. :D EX for Mobile: @media only screen and (min-width: 500px) { } EX for Tablet: @media only screen and (min-width: 800px) { } Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D like that i want to know