如何在小分辨率上更改字体大小

我在图像传送带上有标题，当我调整窗口的大小时，我的标题不会更改字体大小。我试着用@media查询，但没有工作。如何在小分辨率上更改字体大小

HTML

<div class="item"> 
    <img src="images/6.jpg" alt=""> 
    <div class="carousel-caption"> 
    <h3> Pont Neuf Bridge in Paris</h3> 
    </div> 
</div>

我想这一点，是有办法来设置CSS在这种情况下，标题<h5>？ CSS

@media (max-width: 768px) { 
.carousel-caption{ 
font-size:10px; 
} 
}

来源

2015-03-02 RS92

媒体里面查询，你能更具体：'.carousel字幕H5 {//规则}'应该做的伎俩。 – lwalden 2015-03-02 16:19:09

你试过Viewport Width？它使得字体比例与浏览器窗口的宽度一致，因此不需要媒体查询。

More Info

例子：在CSS

.carousel-caption h5 { 
    font-size: 3vw; 
}

来源

2015-03-02 16:22:19

我认为常见的概念是为了避免这种情况，因为它在某些浏览器上没有被正确支持，媒体查询仍然是我担心的最好方式。 – 2015-03-02 16:27:27

@Jackhardcastle我假设你没有点击我答案中的第一个链接呢？我在我所有主流浏览器的网站上都能正常工作 – 2015-03-02 16:29:02

我以前去过那个网站，注意到支持只是IE浏览器的一部分，而部分它意味着部分（测试它），看看它是如何响应的是。 IE占全球浏览器使用量的10％，因此对它进行解释很重要，即使这看起来像一个低数字。 – 2015-03-02 16:30:22

这将改变h5标签的font-size为小屏幕：

@media screen and(max-width:480px){ 
    h5{ font-size:1.1em; } /* or whatever value */ 
}

在您使用的是h3标签，而不是你的h5示例代码...所以这有点怪怪的

来源

2015-03-02 16:18:24 vsync

不工作，我试着用h3。我解决了与视口，在任何情况下，谢谢 – RS92 2015-03-02 16:28:00

这是不可能的，它不工作。你错了我的朋友。我向你提供了你所要求的。如果它不起作用，那肯定是你做错了。请向我们展示代码，或者创建一个测试页面。被接受的答案的解决方案可能会在您的小屏幕设计（例如移动设备）中造成严重破坏。 – vsync 2015-03-02 16:45:11

我在这里发布了我的完整代码http://jsfiddle.net/8r7Lbbsr/，但它不是一样的样子，因为图片没有导入，我觉得jsfiddle上没有引导类。 – RS92 2015-03-02 21:05:25

如何在小分辨率上更改字体大小

回答

相关问题