当我调整浏览器窗口大小时,我希望所有(或只是一些)图像自动调整大小.我发现了以下代码 - 但它没有做任何事情.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg); …在这个例子中:
CSS
h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }
HTML
<h1>Hi, I am a <span class="smaller">toad</span></h1>
"toad"这个词是0.5p 16px(浏览器的标准字体大小)还是0.5em 2em(h1的字体大小)？
我正在尝试创建一个响应的正方形网格.应调整方块大小以适合视口的宽度.更改视口的高度时,方块不应调整大小.
我得到了如何调整每个方块的宽度,但我不知道如何使元素方形以及如何在视口宽度变化时缩放它们的高度.
在下方小提琴的示例中,七个方格应始终水平放置,并且它们应按比例缩放.我不在乎可见的行数.
在这里小提琴http://jsfiddle.net/gonyhvz8/11/
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div> …整个页面的父元素是一个居中的div,限制为最大宽度为960px.页面上的所有其他元素都是该父div的子元素.简化的结构如下:
<div id="parent">
<div id="something"></div>
<div id="wide-div></div>
<div id="something-else></div>
</div>
虽然父div不应该扩展到960px的宽度,但我在这里称为"wide-div"的div应该填满整个屏幕宽度.它包含一个比960px宽的单个图像,它应该为整个屏幕宽度设置不同的背景颜色.
我不能轻易地从父div中取出那个div,它会弄乱我的布局的其他部分,这会使整个事情变得相当尴尬.
我发现了一些关于如何实现这一目标的技巧,但似乎没有一个符合我的要求.我的设计很敏感,或者至少我试图实现这一目标.我发现的技巧依赖于知道所涉及元素的大小,这在我的情况下并不固定.
有没有办法在响应式布局中将内部div扩展到全屏宽度？
我有这个D3图表 - 几乎开箱即用.有没有办法让它响应并使用宽度和高度变量,innerRadius和outerRadius的百分比？我在响应式网站上工作,需要根据屏幕大小/浏览器大小进行更改.
jsfiddle:http://jsfiddle.net/BTfmH/1/
码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html,
body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.chart-container {
/* width:50%;
height:50%;*/
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 350,
height = 350,
? = 2 * Math.PI;
var arc = d3.svg.arc()
.innerRadius(100)
.outerRadius(135)
.startAngle(0);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
var background = …看起来像新版本3.0我必须设置图像的类名称,col-lg-4 col-sm-4 col-4如果图像是具有相同类名的div的一部分,以使图像响应所有断点.
在版本2中,图像CSS属性默认继承父级的div属性.
它是否正确？
javascript responsive-design twitter-bootstrap twitter-bootstrap-3
我试图在bootstrap网站上找到一个很好的解决方案,但我还没有得到答案.我想我不可能是唯一一个与此斗争的人,但我找不到任何帮助我的东西.
我正在尝试在我的网站上嵌入一个mp4视频.问题是,如果我使用iframe-tag,我就不能使用自动播放和循环.因此,我想用视频标签(或其他支持自动播放和循环的东西)来解决它.之后,我尝试使用对象标签响应视频,但这不起作用.即使我在我的代码(告诉你)中让它,你可以在下面看到:
<div align="center">
<object class="embed-responsive-item">
<video autoplay loop >
<source src="file.mp4" />
</video>
</object>
</div>
我希望你们中的任何人都可以帮我解决这个问题.
video mp4 responsive-design twitter-bootstrap twitter-bootstrap-3
我想通过CSS缩放iFrame width: 100%,高度应按比例缩放到宽度.
使用<img>标签,这工作正常.
图像和iFrame都在html中定义了宽度和高度.
这里有一些例子:
<html>
<style>
#a{ width: 500px; }
img{ width: 100%; height: auto }
</style>
<body>
<div id="a">
<img src="http://lorempixel.com/200/150/" width="200" height="150" />
</div>
</body>
这对图像效果很好,但我想对iFrames采取相同的行为:
<html>
<style>
#a{ width: 900px; background: grey;}
iframe{ width: 100%; height: auto }
</style>
<body>
<div id="a">
<iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
</div>
</body>
iFrame渲染100%宽,但不像图像那样按比例缩放高度.
我在twitterBootstrap基本响应式设计网站上实现了GoogleMapsV3地图.
但我的问题很简单:我有:
<div id="map"></map>
和
#map{ width: 100%; height: 200px }
我希望能够将高度更改为外形.就像在这个"在我的梦中CSS"
#map { width: 100%; height: width * 1.72 }
我试图将高度,设置为自动以及各种各样的因素留下来 - 但只是为了让div永远崩溃.
我编写js-solution没有问题,但希望有一个简单的清理CSS解决方案,可能是CSS3
如果不可能,那将是什么最好的方式来解决这个问题？(计时器,事件......等)
我一直在尝试使用以下HTML实现响应式图像的新srcset方法
<img class="swapImages"
srcset="assets/images/content/large.jpg 1200w,
assets/images/content/medium.jpg 800w,
assets/images/content/small.jpg 400w"
sizes="100vw"
src="assets/images/content/small.jpg"
alt="responsive image">
我使用chrome 40,我得到的是最大的图像,调整我的浏览器大小,清除缓存什么都不做.
我读到了我必须填充的地方,所以我使用了picturefill插件,虽然chrome应该支持它.....仍然不起作用.
我为它准备了一个演示页面:http: //www.darrencousins.com/lab/resp-img-srcset/
我做错了什么/没有得到什么？
任何帮助都非常受欢迎.