Responsive design 如何在响应性网页上找到图像的尺寸?

Responsive design 如何在响应性网页上找到图像的尺寸?,responsive-design,Responsive Design,我是一名平面设计师。他们想让我在页面上设计一些滑块图像。但是没有人知道尺寸。当我查看页面时,我看到图像有4种不同的维度 大的 中等 小的 XSmall 所以当你用手机进入网站时,会出现Xsmall图像…等等 我尝试了一些标尺和响应视图扩展;但这对我没有帮助 如何找到准确的尺寸?准确的步骤可能取决于您使用的浏览器。以下是有关Chrome的一些说明(它们与其他浏览器类似): 调整窗口大小以获得最小尺寸的图像 右键单击图像并“检查元素” 您将看到“计算”选项卡。这表示此图像的计算CSS属性。从该视图

我是一名平面设计师。他们想让我在页面上设计一些滑块图像。但是没有人知道尺寸。当我查看页面时,我看到图像有4种不同的维度

大的 中等 小的 XSmall

所以当你用手机进入网站时,会出现Xsmall图像…等等

我尝试了一些标尺和响应视图扩展;但这对我没有帮助


如何找到准确的尺寸?

准确的步骤可能取决于您使用的浏览器。以下是有关Chrome的一些说明(它们与其他浏览器类似):

  • 调整窗口大小以获得最小尺寸的图像
  • 右键单击图像并“检查元素”
  • 您将看到“计算”选项卡。这表示此图像的计算CSS属性。从该视图中,可以以像素为单位读取高度和宽度
  • 调整窗口大小,并对每个图像大小重复此操作

更高级的方法:根据他们如何实现响应式web设计,您可以查看页面正在加载的CSS,并查找
@media
查询,这些查询根据浏览器的视口控制图像的大小。阅读更多关于
@media

你在寻找断点吗?你可以用css或javascript来实现,如果你需要更多的知识,你可以阅读twitter引导陷阱works@jpp你的编辑看起来不错,但是你100%确定OP想要的是标题编辑吗?@PeeHaa重读后,我仍然认为这是预期的解释,虽然肯定有一些模糊的空间。是的,不确定。。。在批准或改进编辑之前,将等待OP澄清