0

我正在使用具有响应式设计的 Twitter Bootstrap ，因此几乎在任何设备/屏幕尺寸或密度上，所有 Bootstrap 元素的尺寸/字体大小都适合屏幕尺寸。

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

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

尺寸不是唯一的问题。如何设置上述图像的边距/填充。因此页面在许多设备上看起来都完全相同。如果我在我的台式电脑/全高清屏幕上显示该图像，我有近 2000 像素的宽度。在纵向模式下的 Galaxy Nexus 上，我可以使用不到 1000 像素的宽度。

我是 CSS 的中级或初学者，在移动开发/响应式设计方面完全无知（初学者），所以这个问题可能看起来很愚蠢。对不起！

4

1 回答 1

2

只需使用基于视口自动调整所有内容的元标记：

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

将上面的行放在<head>标签上，边距、填充和文本应该看起来不错。

图像也应该是成比例的，但是对于像大背景图像这样的东西body，div你需要改变 bootstrap-responsive.css 文件来引入“正确”的图像。因此，您可能需要台式机和大型笔记本电脑的大背景图像，平板电脑的不同位置的中等尺寸图像，以及智能手机的无缝图案图像。只需查找文件的@media 部分并添加/编辑 css。

于 2013-02-14T21:34:52.460 回答