如何根据设备屏幕更改引导转盘中的文本大小
如何根据设备屏幕更改引导转盘中的文本大小
提问于 2015-07-16 20:14:30
我想根据设备屏幕改变轮播内部的文本大小。请帮我一下。代码如下：
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h2>Hello</h2>
</div>
<div class="item">
<h2>Hello2 sdfd dljdklf dlkj kld lkjkld lkjkld dlkjlkd ljkl dlkjls slkj </h2>
</div>
<div class="item">
<h2>Hello3</h2>
</div>
<div class="item">
<h2>Hello4 djkl jd kljld kjd lkjl d lkjkl lkjlk </h2>
</div>
</div>在这里，我想要更改h2文本大小和项目高度应该是所有四个项目的共同。
提前谢谢。
回答 1
Stack Overflow用户
发布于 2015-07-16 20:21:57
请考虑使用CSS Media Queries来实现这一点。
示例如下：
@media (max-width: 992px) {
.item h2 {
font-size: 3rem;
}
}上面的媒体查询表明，如果屏幕宽度的最大值为992px，则item类中的h2的字体大小应为3rem。
如果屏幕为993px或更大，则不适用。
您可以使用多个值：
@media (max-width: 992px) {
.item h2 {
font-size: 3rem;
}
.item h2 {
color: red;
}
.item h2 {
text-decoration: underline;
}
}然而，上面的例子并不理想，因为它重复了不必要的代码。很明显，你可以将其压缩为：
@media (max-width: 992px) {
.item h2 {
font-size: 3rem;
color: red;
text-decoration: underline;
}
}您还可以使用多个媒体查询：
@media (max-width: 992px) {
.item h2 {
font-size: 3rem;
color: red;
text-decoration: underline;
}
}
@media (max-width: 768px) {
.item h2 {
font-size: 2.5rem;
color: blue;
text-decoration: none;
}
}第一个媒体查询表明，如果屏幕宽度小于992px，则item类中的h2的字体大小应该为3rem，应该是红色的，并且应该有下划线。
第二个媒体查询说，如果屏幕更远，小于768px，则字体大小应减小到2.5rem，颜色应为蓝色，并且应删除下划线。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31453866
复制相关文章
相似问题
腾讯云开发者
