我试图设置一个自动高度div包含2个子元素,定位固定,绝对绝对.
我希望我的父容器具有自动高度但我知道这很难,因为子元素从页面结构中取出它们的位置.
我已经尝试将高度设置为我的父div工作,但是我的布局响应,当它缩小到移动时,高度保持相同,其中内容变得堆叠,因此高度需要随着其子项而增加.
不确定这是否有意义,我没有我的实际代码在我自己,但我做了一个小提琴试图解释...
通常,什么标记和CSS会在响应式设计中创建一个基于百分比的高度的元素？如何使用Twitter Bootstrap构建2列(固定流体)布局？显示如何创建两个100%高度的列,但这会突破高度<100%.
具体来说,我有一个带有项目列表的侧边栏div,可能是短(空)或长(overflow: auto).但是因为没有父元素具有固定的高度,height: 20%;所以不起作用.如何在保持响应式设计的同时为侧边栏提供流畅的高度？
我正在使用基础3来构建一个响应式网站,但我想让页脚和导航背景宽度占据整个宽度？我把我的行命名为
class="row navigation"
class="row footer"
我试图寻找如何解决这个问题,但我没有选择.我假设它是foundation.css文件中的一个小修复程序,但由于我是新手,它现在有点过于庞大.
任何poiinters非常感谢.
我正在使用以下CSS在响应式HTML5页面上以全宽(100%)显示视频.视频的原始大小为480x270.缩放视频以在所有桌面浏览器上填充页面的整个宽度,同时保持纵横比.
但是,iPad上的Mobile Safari和Chrome(iOS 6.0.1)显示的黑色矩形与页面的宽度相同.视频很小,并以黑色矩形中心的原始大小(480x270)显示.
video {
width: 100%;
max-width: 100%;
height: auto;
}
灵感来自http://webdesignerwall.com/tutorials/css-elastic-videos.在这个页面上有一个评论让我相信iOS6有一个回归.
自从我将iPad升级到iOS 6后,此修复程序似乎不再起作用,我认为它的高度:自动导致问题.任何经验相似且有修复的人？
还有其他人遇到过这个问题吗？我有什么方法可以在iPad(iOS6)上全宽度显示HTML5视频,同时仅使用CSS保留宽高比？
HTML如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<style>
video {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
<source src="file.mp4" type="video/mp4">
<source src="file.webm" type="video/webm; codecs=vp8, vorbis">
<source sr="file.ogv" type="video/ogg; codecs=theora, vorbis">
</video>
我知道要阻止Bootstrap中的主容器位于主体的顶部,并且在导航栏后面,您必须添加填充,如下所示:
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
必须在bootstrap.css和bootstrap-responsive.css之间声明填充,以使填充不会在较小的设备上引起问题,从而破坏站点的响应性.
我正在使用从Bootstrap定制下载的combinde bootstrap.css文件,该文件具有响应和正常的css组合成一个文件.
因为它们被合并到一个文件中,这意味着我无法使用我在本问题开头描述的解决方案,而没有将修复程序实际添加到bootstrap.css文件中(我不想在那里添加它,长篇故事) .
所以我在思考而不是放置这些代码(对于较小的设备使用@media修复):
body { padding-top: 60px; }
@media (max-width: 979px) { body { padding-top: 0; } }
进入我自己的css文件(main.css)并将其包含在bootstrap.css之后,在html中,如下所示:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
你认为这个解决方案是否可以接受？
假设你试图为这样的tilable背景设置动画:
.container {
width: 160px;
height: 91px;
}
.bg {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
background-size: contain;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
@-webkit-keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
@keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}<div class="container">
<textarea class="bg"></textarea>
</div>只要更改容器的尺寸,循环动画就会中断!
有没有办法让没有JS的响应？
对许多人来说,使图像响应一直是响应式网页设计的一个棘手问题.我已经阅读了一些关于相同的文章并且遇到了"srcset"和"picture"作为解决方案.
<img src="flower_500px.jpg"
srcset="flower_750px.jpg 1.5x, flower_1000px.jpg 2x"
width="500px" alt="flower">
<picture>
<source media="(min-width: 45em)" srcset="flower_1000px.jpg">
<source media="(min-width: 32em)" srcset="flower_750px.jpg">
<img src="flower_500px.jpg" alt="flower">
</picture>
我正在尝试决定选择哪两种方法来使图像响应.在这个选择中我应该考虑哪些特征？
我想为我的网站使用不同的字体,这不是常规的webfont.我已经创建了EOT文件.现在我如何将这些字体与twitter bootstrap集成？有人可以帮忙吗？
谢谢
css html5 responsive-design twitter-bootstrap twitter-bootstrap-3
我正在使用Bootstrap 3,在移动视图中,我想应用一些CSS来修复移动视图中的一些错误.我查看了文档和谷歌.我似乎无法找到任何线索.
可能吗？
我是使用CSS3媒体查询的响应式设计的新手.我清楚地了解我们如何使用这些媒体查询来定位不同的设备,但我感到困惑的地方是BROWSER ZOOMING !!
对于Eg:这是我正常的身体css规则
#body {
margin: 0 auto;
width: 70%;
clear: both;
}
当我想更改此css规则以定位宽度落在150px和600px范围内的设备时,我添加此特定媒体查询.
@media only screen and (min-width:150px) and (max-width:600px){
#body {
margin: 0 auto;
width: 90%;
clear: both;
}
}
问题:我正在使用谷歌浏览器,当我放大到大约200%时,这个特定的媒体查询开始发挥作用.
我如何知道要为不同的缩放级别编写哪些媒体查询,或者另外说明浏览器缩放级别和像素宽度之间的关系.