Question

我正在为一个项目建立一个网站。我有一些问题使它＆＃34;兼容＆＃34;对于任何类型的手机，网站上的所有内容都非常小，有些东西必须放大才能阅读它所说的内容。

这是我目前的代码：

＆＃13;

.gitconfig

＆＃13;

    body, html {
      overflow-x: hidden;
      font-family: 'Montserrat', sans-serif;
    }
    #author__image {
      width: 125px;
      height: 125px;
    border-radius: 50%;
      border: 5px solid white;
      margin-bottom: 10px;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: .5s;
    }
    #profile__name {
      font-family: 'Montserrat', sans-serif;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: .8s;
    }
    #profile__asset {
      color: #CCCCCC;
      text-align: center;
      font-family: 'Hind', sans-serif;
      font-size: 18px;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: 1.1s;
    }
    .header img {
      margin-top: 35vh;
    }
    
    .profile__links {
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: 1.4s;
    }
    button {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 18px;
      margin: 15px 5px 5px 5px;
      background: white;
      border: none;
      cursor: pointer;
    }
    
    #twitter {
      color: #55acee;
      background: white;
      border: white 2px solid;
    }
    
    #linkedin {
      color: #007cb7;
      background: white;
      border: white 2px solid;
    }
    #github {
      color: #333333;
      background: white;
      border: white 2px solid;
    }

＆＃13;

Answer 1

您需要在HTML的head标记中添加元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

你可能也想在你的CSS中使用它：

@-ms-viewport{
    width: device-width;
}

Answer 2

您应该使用class="col-sm-12"而不是class="col-12"。查看w3学校的bootstrap：http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Answer 3

你应该纠正这个类：带有容器流体的流体容器这至少是第一个错误

Answer 4

您还需要将cols包裹在row类中。看看这个编辑过的代码：

<div class="container-fluid">
<div class="row">
    <section class="module parallax parallax-1">
        <div class="container header">
           <div class="row">
            <div class="col-md-12 text-center">
                <img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
            </div>
            <div class="col-md-12">
                <h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
            </div>
            <div class="col-md-12">
                <p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
            </div>
            <div class="col-md-12 text-center animated fadeIn profile__links">
                <button id="twitter">
                    <i class="fa fa-twitter" aria-hidden="true"></i>
                </button>
                <button id="linkedin">
                    <i class="fa fa-linkedin" aria-hidden="true"></i>
                </button>
                <button id="github">
                    <i class="fa fa-github" aria-hidden="true"></i>
                </button>
                <button id="email">
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                </button>
            </div>
        </div>
       </div>
    </section>
</div>

Bootstrap - 电话内容小

4 个答案: