我需要在移动视图中使我的字体响应

我尝试过使用媒体查询，但它的帮助甚至尝试了％字体大小的值。请注意，在媒体查询之外，我现在的字体大小为18pt，而在移动视图中，我需要10pt的字体大小。尝试了可能的方式，我可以谷歌。我需要在移动视图中使我的字体响应

@media only screen and (max-width: 768px) { 
     user-access-panel .details-panel .panel-body { 
      padding: 0px 0px 0px 0px !important; 
      width: 100.29%; 
      height: 130px; 
      background-image: url("./images/icons/request-ID-card-bg.png"); 
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: cover; 
      color: #3d4045; 
      /*font-family: Helv-neue-light;*/ 
      background-color: white; 
      font-family: sans-serif; 
      font-size: 10pt; 
      border: 1px solid lightgray; 
      box-shadow: 2px 2px 10px 1px lightgray; 
      vertical-align: middle; 
     } 
    }

来源

2017-02-28 FalconFlyer

但什么是默认的字体大小？媒体查询之前？ – mayersdesign

这将是有益的[链接]（http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/） –

我的媒体查询外的默认字体大小是18pt。 – FalconFlyer

pt是用于打印的单位 - 用于屏幕，你应该使用px，甚至更好em或rem。特别是rem自1个REM是浏览器的默认大小，它通常是“正常”的文字合适大小（以一个段落，即，不是在头）

来源

2017-02-28 11:11:09 Johannes

嗨根据你的建议，我改变了18点至2.5 rem。但是在响应式移动视图中字体没有缩小。 – FalconFlyer

1.）您发布的规则仅适用于此选择器：'用户访问面板.details-panel .panel-body'。尝试使用相同的选择器来设置更一般的规则或不覆盖常规CSS中特定规则的规则。 2.）2.5 rem是非常大的，在大多数浏览器中是40px – Johannes

1.5rem *我的错误。是的，我希望规则只适用于该部分。我如何覆盖。我认为设置一个默认值，然后为移动视图设置一个值（使用媒体查询）确实会覆盖默认设置。你可以通过覆盖来指定你的意思吗？ – FalconFlyer

可以使用vw单位字体大小是repsonsive设计有用实现这种影响。但请检查浏览器对此选项的支持：http://caniuse.com/#feat=viewport-units。

.responsive-type {font-size: 15vw;}

<div class="responsive-type"> 
 
\t <p>I am responsive</p> 
 
</div>

来源

2017-02-28 11:39:09

我需要在移动视图中使我的字体响应

回答

相关问题