我目前正在开发一个网站,我需要在其中放置一些图像以及一些标题和描述。如果浏览器是全屏,则标题显示在一行上;但是,如果浏览器宽度减小,标题会自动显示为两行。
这是浏览器全屏时的样子:
这是当浏览器宽度减小时的样子:
我想让它在浏览器宽度减小时减小标题的大小,并且想知道如何做到这一点。我无法在 Google 上找到任何好的资源,或者我可能只是没有使用正确的关键字进行搜索。
我正在使用 Ruby on Rails 和 Bootstrap (2.3.2) 开发网站。我也在使用 SASS 和 jQuery,但我对它还很陌生。
你可以用css来做@media
操作员:
h1 {
font-size: 30px;
}
@media screen and (max-device-width : 400px)
{
h1
{
font-size:20px;
}
}
@media screen and (min-device-width : 600px)
{
h1, div, etc
{
/* any css rules */
}
}
另请检查有用的资源:
调整窗口大小时自动调整文本大小(字体大小)?
http://alistapart.com/article/responsive-web-design
http://www.w3.org/TR/css3-mediaqueries/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)