Question

问题：

我目前正在开发一个from-pdf模板;我对响应式设计比较陌生，并且遇到以下问题：我在页面底部有一个按钮，我当前正使用设置的margin-left值进行居中。但是这样做可以防止该按钮在屏幕重新调整大小时一直“浮动”到左侧。

目标：

有一个解决方案，允许按钮在“完整尺寸”浏览器中水平居中，但在浏览器尺寸减小时折叠并一直向左浮动。

尝试：

设置填充/边距
将以上两项设置为自动
想到一个可怕的概念性贫民窟黑客（我可以在技术上使图像成为一个长长的白色矩形，按钮居中，然后使图像流畅，从而重新调整大小）

问题网站（对象：附近的橙色按钮）：

http://thedma.org/the-state-of-data/

Answer 1

这里有一个有效的fiddle

诀窍是：

a {
    display: block;
   text-align: center;
}
img {
    max-width: 100%;
}

假设a选择与该按钮对应的链接，img是您的图片。

Answer 2

您想要使用媒体查询。特别是视物高度或视口宽度来自事物的声音。

Link to documentation

基本理念：

@media (max-height: 600px) {
    .bottom-button {
        /* styles */
    }
}
@media (min-height: 600px) {
    .bottom-button {
        /* different styles */
    }
}

如何在响应式设计布局中折叠左侧边距或边距？

2 个答案: