【问题标题】:How do you make a responsive site without media-queries?如何在没有媒体查询的情况下制作响应式网站?
【发布时间】:2014-09-19 13:21:57
【问题描述】:

在我的一生中,如果没有大量使用媒体查询,我无法完全弄清楚这个模板是如何响应的。

https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/

有人有什么想法吗?

我买了这个模板,在我应用它的时候响应有点坏了,作者没有回复电子邮件。

我不太明白这在小屏幕上看起来如何如此优雅。

【问题讨论】:

    标签: html css responsive-design twitter-bootstrap-3


    【解决方案1】:

    网页不需要使用媒体查询来响应。响应式的定义是指元素适应或“响应”您的设备或屏幕尺寸,而不是使用固定或预定义的宽度/高度/排列,而不管查看设备如何。

    您粘贴的链接肯定是一个“响应式”网站,他们通过允许元素具有可变宽度来实现这一点(仅在容器上有一个最大宽度,以确保它不会继续增长,如果你有一个非常大的屏幕,因为那样看起来很有趣)。

    他们这样做的方式使您的 CSS 代码非常简单,并且与各种视口像素定义和媒体查询无关。

    【讨论】:

      【解决方案2】:

      您可以简单地设置max-width 来防止元素在大屏幕上比所需的更宽。这是小提琴:http://jsfiddle.net/ur3futxp/

      【讨论】:

        【解决方案3】:

        该站点使用 twitter 引导程序来使站点响应。默认情况下,如果您使用网格系统,Bootstrap 会使用媒体查询使网站做出响应。请参考文档http://getbootstrap.com/css/

        【讨论】:

          【解决方案4】:

          该站点使用 twitter 引导框架,该框架旨在使站点在不使用任何媒体查询的情况下对所有设备做出响应,因为它已经在其框架中预定义了所有媒体查询,并且如果您想要更多的东西来获得响应你必须在你的 style.css 文件中添加你的类,并确保它不会与 twitter bootstrap 预定义的类冲突,你可以通过查看这个网站来做到这一点

          http://getbootstrap.com

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2019-10-11
            • 2014-07-08
            • 2020-10-10
            • 2023-04-05
            • 2014-03-01
            • 1970-01-01
            • 2018-09-28
            相关资源
            最近更新 更多