responsive-design | 易学教程

Using Javascript to add width to a HTML element

阅读更多关于 Using Javascript to add width to a HTML element

问题 I am trying to work with altering a div tag's position and size with a JavaScript function and am confused about how to reference the current width of the div. This is my function function socialExt() { document.getElementById("Left").style.width = ("Left").width+240px; } I want it to add 240 pixels every time I click on the button. What should I replace ("Left").width with in order to access its width so I can add 240px to it I am also currently not using JQuery, should I use it? 回答1: Quick

Responsive perfect squares inside a fixed positioned div. Part II

阅读更多关于 Responsive perfect squares inside a fixed positioned div. Part II

问题 I made a question a couple days ago here: Responsive perfect squares inside a fixed positioned div. could anyone help me?. and I had the perfect solution from web-tiki (ty again) and working fine so far. If interested you can check here: http://asadordearanda.com/movil (web still under construction and just for mobile, you won't see what is about on a pc browser unless you mimize a lot your window). the fiddle that web-tiki made is http://jsfiddle.net/webtiki/7jJsf/12/. And now I am starting

Mobile First Responsive Image Technique

阅读更多关于 Mobile First Responsive Image Technique

问题 What is the current standard way to handle responsive images in a mobile first approach? That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.? 回答1: Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale. 回答2: Exactly, as sanusart wrote you. For example, if you use Twitter Bootstrap extension (recognized by many

How to make responsive each area of an image map

阅读更多关于 How to make responsive each area of an image map

问题 I have this image map and I am trying for the way to make each selected area responsive... because when changing the size of the screen, the image adapts correctly, but the areas do not adapt to the new size of the image. here you can see the selected area in blue. BLUE AREA IS SELECTED HERE I CHANGE THE SIZE OF SCREEN BUT THE AREA DONT FOLLOW THE IMAGE <img class="img-fluid" src="https://image.ibb.co/jaFWgv/MENU.jpg" alt="" usemap="#Map" /> <map name="Map" id="Map"> <area class="img-fluid"

Responsive design gone awry

阅读更多关于 Responsive design gone awry

问题 I'm trying to get some fonts to scale for a responsive banner on my page, and found and modified some code I found online for these purposes. There are basically two parts to this: On decent sized tablets, laptops, and desktop (or external) monitors, I will use a horizontal banner at the top - this works. On smaller tablets and phones, I want to use a vertical banner on the left side - this is not working. ========== HTML ========== The HTML structure is essentially this (some strings changed

Elements not aligning in Bootstrap

阅读更多关于 Elements not aligning in Bootstrap

问题 I would like for each icon to align with their respective heading. But this is what it looks like instead: CSS HTML : .section-service .bx h4 { text-transform: uppercase; color: #535355; } .section-service .bx span { font-size: 250%; float: left; width: 25%; } .section-service .bx h4, .section-service .bx p { float: right; width: 75%; } <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css

Responsive table with repeating column groups

阅读更多关于 Responsive table with repeating column groups

问题 I have a simple 3 column table (second code sample below). Most of the time it would be displayed on a wide-screen HD TV, so I would like the structure to be like the first code sample below, and yet depending on the width of the screen, if it's viewed on smaller screens instead of having 4 repeating columns groups, change it to 3, then 2 then 1 for phones. How can I do this with CSS/Media queries? <table> <tr> <th>Time</th> <th>Hole</th> <th>Player</th> <th>Time</th> <th>Hole</th> <th>Player

How to swap images on mobile/desktop in responsive mode

阅读更多关于 How to swap images on mobile/desktop in responsive mode

问题 I have a list of images for desktop and mobiles in the following folder structure: img: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png img/mobile: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png I can use the following code to switch desktop img-1.png : <span id="switcher"> <img id="houdini" src="img/img-1.jpg" alt=""> </span> <span id="switcher2"> <img id="houdini2" src="img/img-2.jpg" alt=""> </span> <span id="switcher3"> <img id="houdini3" src="img/img-3.jpg" alt="

Make an image grid centre responsively

阅读更多关于 Make an image grid centre responsively

问题 I have an image grid that is made up of a whole lot of divs, within each div is a heading, a small picture and a description. When the grid is at the maximum width, everything sits in it centred. When the width starts to change it drops the amount of columns that fit in the parent div as needed but I can't work out how to keep everything centred (or if it is possible). Here the basis of the code I am using: HTML <div id="Parent Div"> <Div class="gallery"> <h6 align="center">Title</h6> <img

jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize

阅读更多关于 jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize

问题 I've noticed that when using jQuery Isotope or Masonry with a fluid / responsive website, the elements overlap momentarily whilst the browser window is being resized. Please see the images below, which are screenshots from this demo. You can also see this happening on the Isotope website. Is there anything that can be done to avoid this overlapping? 回答1: For Isotope version 3 use: $(window).resize(function(){ $('.grid').isotope('layout'); }); to avoid overlapping grid items. 回答2: Thanks to