Twitter Bootstrap具有响应式设计 - 如何设计自己的非框架元素

我使用的Twitter Bootstrap与responsive design，因此在几乎任何设备/屏幕尺寸或密度上，所有Bootstrap元素都具有适合屏幕尺寸的尺寸/字体大小。Twitter Bootstrap具有响应式设计 - 如何设计自己的非框架元素

但是，我自己的非框架元素呢？我应该如何让他们遵循响应式设计并且看起来一样？例如 - 图像。它应该具有什么样的尺寸以及如何设计它，所以它在台式电脑和手机上看起来都是一样的？

我有这个问题与250x250px图像。在我的台式计算机上的移动网站模拟器上，它填满了一半以上的屏幕（模拟器假定模拟设备的屏幕尺寸中等）。但是当我在Galaxy Nexus上打开此页面（具有巨大的XHDPI屏幕密度）时，250x250像素的图像看起来很小。

大小不是唯一的问题。如何设置上述图像的边距/填充。所以在许多设备上页面看起来完全相同。如果我在台式电脑/全高清屏幕上显示该图像，我的宽度将近2000像素。在人像模式下的Galaxy Nexus上，我将使用小于1000像素的宽度。

我在CSS中初学者或初学者，在移动开发/ resposive设计中完全无知（初学者），所以这个问题可能看起来很愚蠢。抱歉!

来源

2013-02-14 trejder

在一个问题中，您有很多问题，这会鼓励很多只回答其中一些问题的答案。 – cimmanon 2013-02-14 21:43:35

嗯，我必须说，我有点惊讶。 “很难说出这里被问到的是什么。”那么，对我来说，这个问题是显而易见的，并且被放在主题中 - _如何在自适应设计中设计自己的非框架元素。但是，好的，如果你觉得这不是一个真正的问题，那很好。似乎tahdhaze09的答案（他可能认为，这是一个真正的问题，因为他已经回答），一些自己的研究必须对我来说足够了。不管怎么说，还是要谢谢你。 – trejder 2013-02-15 08:39:10

对我的问题的答案与[]一样简单（http://stackoverflow.com/a/11442130/1469208）：“_0mit' width'和'height'在''标记上，如果它的父元素是响应的它会缩放。“虽然-1对我来说没有足够的研究_before_问。 – trejder 2013-02-15 10:40:16

只需使用的元标记，比例自动基础上，视一切：

<meta content="width=device-width, initial-scale=1.0" name="viewport">

放在你<head>标签上面的线，边距，填充和文本应该很好看。

图像也应该是相称的，但对于像在body或大div的大型背景图片，你需要改变引导-responsive.css文件“正确”的形象带来。因此，您可能需要台式机和大型笔记本电脑的大型背景图像，平板电脑不同的中等大小的图像以及智能手机的无缝图案图像。只需查找文件的@media部分并添加/编辑css即可。

来源

2013-02-14 21:34:52 tahdhaze09

谢谢你的回答。这真的是，我一直在问，这似乎是我进一步研究的一个很好的起点。谢谢！ – trejder 2013-02-15 08:40:06

不客气！祝你自己的引导布局。 – tahdhaze09 2013-02-20 15:36:03

Twitter Bootstrap具有响应式设计 - 如何设计自己的非框架元素

回答

相关问题