ruby-on-rails - 当窗口大小改变大小时,Mailchimp 如何设法将框移动到另一个框下方(css3/媒体查询)

标签 ruby-on-rails css media-queries

我不是 CSS3 的专家,我想知道 mailchimp 是如何设法获得他们的 sign in page 的, 将“保持登录”框放在登录框下方,并且两者都扩展到 100% 宽度(而不是在屏幕尺寸更宽时每个都扩展到 50%)。

由于我不是专家,我想知道他们是通过纯标准 CSS(简单的东西)还是使用媒体查询(我听说过)来做到这一点。 如果是媒体查询,那么我会尝试深入研究它!

这是两张图片:

  • 对于相当大的屏幕,eahc 按钮在同一水平线上共享 50% 的宽度

enter image description here

  • 对于较小的屏幕,每个按钮分布在整个宽度(100% 宽度)上并跨越 2 行

enter image description here

最佳答案

它使用媒体查询

检查以下链接以获取更多信息并开始使用

http://mediaqueri.es/

http://css-tricks.com/css-media-queries/

关于ruby-on-rails - 当窗口大小改变大小时,Mailchimp 如何设法将框移动到另一个框下方(css3/媒体查询),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17784403/

相关文章:

ruby-on-rails - Ruby on Rails 3 : How to create a 12 hour (with AM/PM) time select element?

css - rails 上的 ruby : Change flash message colour without Twitter Bootstrap

javascript - 正文背景图片不能全屏

jquery - 使用 SVG 图像蒙版重新创建视差缩放效果

html - css - 打印的页面文本在分页符处超出 block

css - 设备像素比的媒体查询不起作用

ruby-on-rails - Rails 5 强参数在复选框值中包含一个数组

ruby-on-rails - 如何在 Rails 模型中渲染_to_string?

javascript - 将焦点设置到 div 中的字符串末尾

html - 如何排列两个 HTML 列,其中一个具有固定部分,以便它们可以堆叠?