2301_77204022 2024-12-15 19:38 采纳率: 100%
浏览 63
已结题

媒体查询字体大小不生效

#由于没上传css文件，我把网页的字体相关css的行粘贴到下面了

body { color:#000; font-size:14px; font-family: "宋体";background:#fff;} 
.clear{clear:both; height:0 !important; line-height:0; font-size:0;}
.fixed:after { content: "."; display: block; clear: both; height: 0;width:0;font-size:0; visibility: hidden; }
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height:0;}
.pro h3 a{color: #32A8CE;font-size: 30px;}
.pro h3  em{font-weight: normal;text-transform: uppercase;color: #ccc;font-size: 12px;font-family: Arial;padding-left: 10px;}
.p_fl li h4 a{color: #fff;font-size: 15px;display: block;font-weight: normal;}
.p_fl li p a{display: inline-block;padding:0 15px;font-size: 14px;}
.p_tab li a{color: #fff;font-size:15px;}
.p_tabc li a{color: #fff;font-size: 14px;display: block;}
h1 { font-size:32px;}
h2 { font-size:26px;}
h3 { font-size:20px;}
h4 { font-size:18px;}
h5 { font-size:12px;}
h6 { font-size:10px;}
.text-area p{
    letter-spacing: 1.2px;
    font-size:14px;
    padding:5px 0px;
    line-height:180%;
}
.text-area h4{
    color: #0085c3;
    font-size: 2em;
    letter-spacing: 2px;
    margin-bottom: 0.5em;
}

#我尝试在css中加入以下代码，但是不生效


@media (max-width: 768px) {
  html {
    font-size: 24px;
  }
}
 
@media (max-width: 576px) {
  html {
    font-size: 20px; 
  }
}

# 我也尝试用bootstrap4的响应式字体 class="lead"，<p class="font-weight-bold">，结果移动端字体还是偏小，而且影响PC端字体

#我的需求是：不修改网页原有的的css样式，引入bootstrap4之后，需要不影响PC端字体大小显示，指定移动端字体大小

#我在媒体查询里面加了!important; 还是不生效
#媒体查询回答的方法都试了，主要是不生效
#我用浏览器开发工具查看了移动端的css样式如下，但不是媒体查询的样式

img

  • 写回答

30条回答 默认 最新

  • M_try的小尾巴 2024-12-15 19:42
    关注

    该回答引用自Deepseek,由本人整理审核 若有帮助，望采纳。

    根据你提供的信息，你希望在引入Bootstrap 4后，不修改原有的CSS样式，同时确保在移动端有合适的字体大小，而不影响PC端的字体显示。以下是解决方案的详细步骤：

    1. 使用Bootstrap 4的响应式字体类

    Bootstrap 4提供了一些内置的响应式字体类，如 .text-sm-*, .text-md-*, .text-lg-*, .text-xl-* 等，这些类可以根据屏幕大小自动调整字体大小。你可以使用这些类来实现你的需求。

    2. 自定义媒体查询

    你已经尝试使用媒体查询来调整字体大小，但发现效果不理想。为了确保不影响PC端字体大小，同时指定移动端字体大小，你可以使用以下方法：

    2.1 在Bootstrap的媒体查询中添加自定义样式

    Bootstrap 4的媒体查询断点是基于 min-width 的，因此你可以利用这些断点来添加自定义样式。

    /* 自定义媒体查询，确保不影响PC端字体大小 */
@media (max-width: 767.98px) {
  body {
    font-size: 16px; /* 移动端字体大小 */
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 14px; /* 更小的移动端字体大小 */
  }
}

    2.2 使用Bootstrap的响应式字体类

    你也可以结合使用Bootstrap的响应式字体类来实现更精细的控制。例如：

    <p class="text-sm-center text-md-left">这是一个响应式段落</p>

    3. 确保Bootstrap的CSS文件正确引入

    确保你已经正确引入了Bootstrap 4的CSS文件。通常情况下，你需要在HTML文件的 <head> 部分引入Bootstrap的CSS文件：

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    4. 避免覆盖原有样式

    为了避免覆盖你原有的CSS样式，你可以将自定义的媒体查询样式放在Bootstrap的CSS文件之后，这样可以确保你的自定义样式不会被Bootstrap的默认样式覆盖。

    5. 测试和调整

    最后，确保在不同设备上测试你的网页，以确保字体大小在移动端和PC端都显示正常。

    总结

    通过使用Bootstrap 4的响应式字体类和自定义媒体查询，你可以在不修改原有CSS样式的情况下，实现移动端字体大小的调整，同时不影响PC端的字体显示。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(29条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 12月20日
  • 已采纳回答 12月20日
  • 修改了问题 12月17日
  • 赞助了问题酬金15元 12月16日
  • 展开全部