移动 Bootstrap Carousel - 调整字体大小
发布于2023-11-12 15:27 阅读(1189) 评论(0) 点赞(25) 收藏(2)
我已经向我正在开发的网站添加了一个简单的 bootstrap 4 轮播，并且轮播本身正在正常工作。
当我在移动设备 (Galaxy S8+) 上检查该网站并向下滚动到引导轮播时，字体大小最初是正确的，但当我滚动浏览每个轮播项目时字体大小会放大。
我的问题是，手机屏幕分辨率或像素密度是否会导致此问题？我也在Iphone4和Iphone7上查看了该网站，字体没有放大，这正是我想要的。
我有调整段落高度的媒体查询，以便当用户滚动到不同的轮播项目时容器不会调整大小
@media screen and (max-width: 1200px) {
.testimonial-text {
min-height: 185px;
}
}
@media screen and (max-width:991px) {
.testimonial-text {
min-height: 215px;
}
}
@media screen and (max-width:767px) {
.testimonial-text {
min-height: 215px;
width: 100%;
}
}
@media screen and (max-width:522px) {
.testimonial-text {
min-height: 240px;
}
}
@media screen and (max-width:456px) {
.testimonial-text {
min-height: 265px;
}
}
@media screen and (max-width:413px) {
.testimonial-text {
min-height: 315px;
}
}
@media screen and (max-width:368px) {
.testimonial-text {
min-height: 375px;
}
}
这是一个用于推荐的轮播，我使用的段落标签的字体大小设置为 16px，就像我之前所说的 - 最初，在移动到第二个轮播项目之前，字体大小看起来是正确的。一旦我移动到下一个轮播项目，字体大小就会跳动几个像素。在轮播项目转换之间，字体大小看起来是正确的，但一旦转换停止，字体大小就会跳回来。一旦轮播被实例化，它就会保持这样的状态。
重申一下，这仅适用于我的移动设备。
jsfiddle - https://jsfiddle.net/a92ys80v/20/
预先感谢您的任何意见。我也很乐意提供更多信息。
解决方案
我不清楚你想要什么，但如果你想减小字体大小或为移动/设备提供任何样式，你可以为该设备宽度编写媒体查询，如下所示
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
欲了解更多信息，请访问此处
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/531977/061c2fc75374f24cd965/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力