It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center。
6年前关闭。
我将Twitter Bootstrap与responsive design一起使用，因此实际上在任何设备/屏幕尺寸或密度上，所有Bootstrap元素的尺寸/字体大小均适合屏幕尺寸。
但是，我自己的非框架元素呢？我应该如何设计它们以遵循响应式设计并看起来相同？例如-图片。它应该具有什么尺寸以及如何设置样式，以便在台式计算机和手机上看起来都一样？
我在使用250x250px图片时遇到了这个问题。在我的台式计算机上的移动网站模拟器上，它占据了屏幕的一半以上（模拟器假定模拟设备的屏幕尺寸中等）。但是，当我在Galaxy Nexus（具有巨大的XHDPI屏幕密度）上打开此页面时，250x250px的图像看起来很小。
尺寸不是唯一的问题。如何设置上述图像的边距/填充。因此页面在许多设备上看起来都完全一样。如果在台式机/全高清屏幕上显示该图像，则我的宽度将近2000 px。在纵向模式下的Galaxy Nexus上，我可以使用的宽度小于1000像素。
我是CSS的中级或初学者，并且在移动开发/可重复性设计中是一个完全愚昧的人（初学者），所以这个问题似乎很愚蠢。抱歉!
将上面的行放在您的
图像也应该成比例，但是对于
6年前关闭。
我将Twitter Bootstrap与responsive design一起使用，因此实际上在任何设备/屏幕尺寸或密度上，所有Bootstrap元素的尺寸/字体大小均适合屏幕尺寸。
但是，我自己的非框架元素呢？我应该如何设计它们以遵循响应式设计并看起来相同？例如-图片。它应该具有什么尺寸以及如何设置样式，以便在台式计算机和手机上看起来都一样？
我在使用250x250px图片时遇到了这个问题。在我的台式计算机上的移动网站模拟器上，它占据了屏幕的一半以上（模拟器假定模拟设备的屏幕尺寸中等）。但是，当我在Galaxy Nexus（具有巨大的XHDPI屏幕密度）上打开此页面时，250x250px的图像看起来很小。
尺寸不是唯一的问题。如何设置上述图像的边距/填充。因此页面在许多设备上看起来都完全一样。如果在台式机/全高清屏幕上显示该图像，则我的宽度将近2000 px。在纵向模式下的Galaxy Nexus上，我可以使用的宽度小于1000像素。
我是CSS的中级或初学者，并且在移动开发/可重复性设计中是一个完全愚昧的人（初学者），所以这个问题似乎很愚蠢。抱歉!
最佳答案
只需使用可根据视口自动按比例缩放所有元素的meta标签即可：
<meta content="width=device-width, initial-scale=1.0" name="viewport">
将上面的行放在您的
<head>标记上，页边距，填充和文本应看起来不错。图像也应该成比例，但是对于
body或大div上的大背景图像，您需要更改bootstrap-sensitive.css文件以引入“正确的”图像。因此，您可能需要用于台式机和大型笔记本电脑的大背景图像，用于平板电脑的其他位置的中型图像以及用于智能手机的无缝图案图像。只需查找文件的@media部分，然后添加/编辑CSS。关于css - 具有响应式设计的Twitter Bootstrap —如何设置自己的非框架元素的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14884292/
10-09 05:20