css - 将所有图像集中在响应式设计上

标签 css media-queries responsive-design

我想知道是否有一种好的、通用的、简单的方法来编码/声明所有图像在特定视口(viewport)下方的响应式设计中水平居中。

例如,低于 480 像素宽度的视口(viewport),所有图像都显示为 block 并在屏幕上居中。

最佳答案

您需要结合使用 CSS 媒体查询和实际 CSS...

例如您可以拥有 2 个独立的 CSS 文件,并根据设备特性调用相关的文件

<link href="small.css" media="only screen and (max-width:480px)" />
<link href="big.css" media="only screen and (min-width:480px)" />

然后在 small.css/big.css 中定义实际的 CSS

例如在small.css中,定义如下样式

img {margin:o auto;text-align:center}

并且无需在 big.css 中定义任何内容(应用默认值)

关于css - 将所有图像集中在响应式设计上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9235125/

相关文章:

css - 防止 iframe 中的边框

css - 浏览器缩放 90% 不使用媒体查询

html - Div 文本的颜色在打印时发生变化

css - 媒体查询在智能手机中不起作用

css - 需要像示例中那样创建 div 形状

javascript - 显示 anchor 标记

html - 如何制作带有页眉和左侧边栏的页面?

css - 媒体查询在 Codepen 中工作,但不是通过文本编辑器/chrome

css - 如何制作响应式组件?

html - 将多个 div 元素彼此对齐,同时保持响应能力