标签: responsive-design

我正在测试Bootstrap响应性导航栏,我有一个演示网站.当我在桌面上调整浏览器大小时,一切正常,包括导航栏,它成为可折叠菜单,顶部有一个小图标,我可以单击该按钮查看更多菜单按钮.

但是当我从移动浏览器尝试它时(我在Android上尝试使用chrome和互联网浏览器),我没有看到响应式设计.我只能看到像网站这样的非常小的桌面版本.

谁能指出我做错了什么？

我有以下代码设置一个容器,其高度随浏览器重新调整大小而改变(以保持方形宽高比).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

如何在容器内垂直对齐IMG？我的所有图像都有不同的高度,容器不能有固定的高度/线高,因为它的响应...请帮忙!

iPhone 5有一个更长的屏幕,它没有捕捉我的网站的移动视图.什么是iPhone 5的新响应式设计查询,我可以与现有的iPhone查询结合使用吗？

我目前的媒体查询是这样的:

@media only screen and (max-device-width: 480px) {}

我需要使用bootstrap创建一个响应式页面,在页面中心放置一个div,就像下面提到的布局一样.

我在我们的网站上嵌入了一个YouTube视频,当我将屏幕缩小到平板电脑或手机尺寸时,它的宽度大约会缩小到560px.这是YouTube视频的标准还是我可以在代码中添加一些内容以使其变小？

我有一个必须响应手机的网站.我用我的桌面创建了它.当我调整浏览器窗口时,它可以很好地用于手机,但是当我在真正的手机上查看它时:三星Galaxy S2它对移动视图没有响应.

怎么可能是错的？

目标是使<svg>元素扩展到其父容器的大小,在这种情况下为a <div>,无论容器有多大或多小.

代码:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

这个问题最常见的解决方案似乎是viewBox在<svg>元素上设置属性.

viewBox="0 0 widthOfContainer heightOfContainer"

但是,在元素中的<svg>元素具有预定义的宽度和/或高度的情况下,这似乎不起作用.例如,<rect>上面代码中的元素明确设置了其宽度和高度.

所以显而易见的解决方案是在这些元素上使用%widths和%high.但这甚至必须要做吗？特别是,因为<img src=test.svg >工作正常并且扩展/收缩而没有明确设置<rect>高度和宽度的任何问题.

如果元素<rect>和像它一样的其他元素必须以百分比定义它们的宽度和高度,那么在Inkscape中有一种方法可以设置它,以便<svg>文档中的所有元素都使用百分比宽度,高度等.而不是固定尺寸？

我需要使用Twitter Bootstrap为我的Web应用程序添加响应式设计功能.我只想要响应行为,我对排版,组件或Bootstrap中包含的任何其他内容不感兴趣.

我选择了网格系统,我得到了一个自定义的Bootstrap版本.但是,当我将生成的CSS添加到我的应用程序时,我的所有样式都搞砸了(标题,链接和其他).为什么会这样？如何只使用网格系统获得Bootstrap CSS？我想避免手动修改Bootstrap文件.

谢谢!

我有一个网站,它有一个固定的长宽比近似16:9景观,像一个视频.

我想让它居中并扩展以填充可用的宽度和可用的高度,但不要在任何一侧变大.

例如:

1. 高而薄的页面将使内容伸展整个宽度,同时保持比例高度.
2. 较短的宽页面将使内容延伸到整个高度,具有成比例的宽度.

我一直在研究两种方法:

1. 使用具有正确宽高比的图像来扩展容器div,但我无法让它在主要浏览器中以相同的方式运行.
2. 设置比例底部填充,但仅相对于宽度工作并忽略高度.它随着宽度不断变大,并显示垂直滚动条.

我知道你可以很容易地用JS做到这一点,但我想要一个纯CSS解决方案.

有任何想法吗？

鉴于Twitter Bootstrap旨在响应/设备友好,为什么它不使用相对字体大小？