Question

我有一个投资组合页面。如果存在投资组合图像，则该行应分为两部分。如果不是 - 投资组合描述在一行。我的页面上有三行。其中一些可以是图像，一些不是。在大屏幕上一切都很好，但在移动设备或ipad上，没有图像（col-*-12）的div的字体大小比col-*-6大得多。

 <div class="row">
  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
   </div>
   <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">        
   <% if @portfolio.first_picture.present? %>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="portfolio-description">
             <h2 class="row-header"> Project statement</h2>
             <h4 class="p-description"><%= @portfolio.project_statement%></h4>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 portfolio-pic">
            <%= image_tag(@portfolio.first_picture, class: 'portfolio-picture') %>
          </div>
      <% else %>
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 outer-desc">
            <div class="portfolio-description">
             <h2 class="row-header"> Project statement</h2>
             <h4 class="p-description"><%= @portfolio.project_statement %></h4>
            </div>
          </div>
      <% end %>
    </div>

@media (min-width: 768px) and (max-width: 991px) {
  .row-header {
     font-size: 1.8em !important;
  }
  .p-description {
     font-size: 1.3em !important;
  }
}

如何使所有这些div看起来具有相同的字体大小？（它们具有相同的大小，但看起来不同）

Answer 1

我将此添加到我的页面头部并且效果很好。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" charset="utf-8">

bootstrap cols中字体大小的不同显示

1 个答案: