css – 如何使用响应式布局来获取我的页眉调整大小?

前端之家收集整理的这篇文章主要介绍了css – 如何使用响应式布局来获取我的页眉调整大小?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我有一个网站,我需要在移动设备和计算机上功能.我使用引导响应,已经有很多事情要工作.目前我正在为首页的英雄单位工作.我有一个页面标题,我想根据屏幕大小进行自动缩放.主要的引导站点(http://twitter. github.com/bootstrap/)使用像我想要的主页标题一样的东西.任何帮助是赞赏.

相关代码

<div class="container">
        <div class="hero-unit">
            <div class="page-header">
                <h1>Page Header</h1>
            </div>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Mauris arcu dolor,dictum scelerisque gravida nec,vulputate in odio. Pellentesque sagittis ipsum et mauris elementum vitae molestie ipsum blandit. Mauris tempus hendrerit arcu,sed vestibulum justo tempor a. Praesent sit amet odio ligula. Morbi sit amet leo vestibulum neque bibendum ullamcorper sed ut ante. Vestibulum id diam quis ipsum aliquet vestibulum. Donec vulputate auctor pharetra.</p>
            <a href="#" class="btn btn-large btn-primary">Learn More</a>
        </div>
    </div>

编辑:这是另一个例子. http://www.screenlight.tv/
如果您在该页面上调整窗口大小,则相应地调整标题大小.我试着看着源头,我很难找到它.

解决方法

好吧,我已经想到了这一个.为了将来参考,这是使用@media(max-width:)属性完成的.那么你可以这样做:
@media(max-width: 480px) {
  h1 {
    font-size: 12pt;
  }
}

或者你需要做的任何事情.希望这可以帮助未来的人!干杯!

猜你在找的CSS相关文章