Question

我正在使用带有Rails的Twitter Bootstrap并尝试其响应式设计功能。我有两个HTML元素（在下面的评论中引用的h1元素和表单）在移动设备上偏离中心。然而，当我缩小它时，它们在我的浏览器中居中（见截图）。我无法弄清楚如何确保元素在移动设备上居中。

我在视图中有以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag "application", media: "all",
                                           "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
  <header class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
      <div class="container">
        <%= link_to "ReRide", root_path, id: "logo" %>
        <nav>
          <ul class="nav pull-right">
            <li><%= link_to "Home",    root_path %></li>
            <li><%= link_to "About",    about_path %></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
    <div class="container">
      <% flash.each do |key, value| %>
        <div class="alert alert-<%= key %>"><%= value %>
          <a class="close" data-dismiss="alert">×</a>
        </div>
      <% end %>
      <div class="center hero-unit">
        <h1>Welcome to ReRide!</h1>   <!--THIS IS OFF CENTER-->
        <p>Where selling a used bike is painless </p>
        <p>
          <%= simple_form_for @contact, :html => {:class => "form-inline"} do |f| %>  <!--THIS IS OFF CENTER-->
            <%= f.input_field :email, placeholder: 'Email', label: false, input_html: { class: 'input-medium' } %>
            <%= f.input_field :potential_relationship, input_html: { class: 'input-medium' }, collection: Contact::RELATIONSHIP_CHOICES.invert, prompt: "I am a:", label: false%>
            <%= f.button :submit, 'Stay Informed', :class => 'btn btn-primary' %>
          <% end %>
        </p>
      </div>
      <footer class="footer">
        <small>
          <a href="http://www.reridebikes.com/">ReRide Bikes</a>
        </small>
      </footer>
    </div>
  </body>
</html>

CSS文件：

@import "bootstrap";
body {
  padding-top: 60px;  
}
@import "bootstrap-responsive";

/*Everything below is overriding Bootsrap CSS*/

/* mixins, variables, etc. */

$grayMediumLight: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

/* universal */

html {
  overflow-y: scroll;
  width: auto;  
  overflow-x: hidden; 
}

body {
  width: auto; 
  overflow-x: hidden; 
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center; 
  h1 {
    margin-bottom: 10px;
  }
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $grayLight;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $grayMediumLight;
  color: $grayLight;
  a {
    color: $gray;
    &:hover {
      color: $grayDarker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 10px;
    }
  }
}

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb; 
}


input {
  height: auto !important;
}

#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}

.field_with_errors {
  @extend .control-group;
  @extend .error;
}

萎缩的broswer： enter image description here

在iPhone上： enter image description here

Answer 1

您需要媒体查询才能动态更改该大家伙的字体大小。例如：

@media only screen 
  and (max-width : 320px) {
  h1 {
      font-size: 2em;
     }
}

这意味着，在宽度最大为320像素的屏幕上，制作h1字体大小2em（与原始帖子中的默认3em相对）

Here's媒体查询的小页

一些HTML元素不以移动浏览器为中心，使用带引导程序的rails

1 个答案: