如何在没有媒体查询的情况下制作自适应网站?

时间:2014-09-19 04:52:47

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

对于我的生活,如果不广泛使用媒体查询,我无法弄清楚这个模板是如何响应的。

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

有人有什么想法吗?

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

我无法弄清楚这在小屏幕上看起来如此优雅。

4 个答案:

答案 0 :(得分:3)

网页不需要使用媒体查询来响应。响应定义意味着要素适应或“响应”。与您的设备或屏幕尺寸无关,而不是使用固定或预定义的宽度/高度/布置,无论观看设备如何。

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

他们这样做的方式使得CSS代码非常简单,并且可以从各种视口像素定义和媒体查询中整理出来。

答案 1 :(得分:2)

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

答案 2 :(得分:1)

该网站使用Twitter bootstrap使网站响应。默认情况下,如果您使用网格系统,则Bootstrap会使用媒体查询使站点响应。请参阅文档http://getbootstrap.com/css/

答案 3 :(得分:1)

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

http://getbootstrap.com