网站的主体和元素卡在980px宽度上,不会缩小

Question

我正在尝试在Rails应用程序顶部启动前端(仅HTML/CSS)页面,并且无法使用320px视口.有些元素不会缩小,我无法弄清楚原因.我已经通过Inspect Element给出了各种元素max-width: 100%;和/或width: 100%;其他固定宽度,但有些东西是错误的.

的index.html

<div class="temple">
    <div class="container" style="height: 100%;"><div class="row" style="height: 100%;">
        <div class="templeHeader">
            Every tourist sees the temples
        </div>
    </div></div> <!-- container and row -->
</div>

我在"太阳穴"里面有容器和行,因为我希望图像宽度为100%,而不是100%减去容器的边距.

layout.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@mixin center-both {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} 

.temple {
    /* background-image: image-url("temple.jpg"); */
    position: relative;
    height: 500px;
    background-color: black;
    .templeHeader {
        font-size: 52px;
        color: white;
        position: relative;
        text-align: center;
        @include center-both;
    }
}

我怎样才能使它.temple和它的子.templeHeader像素的最大宽度为100%,以便在320px视口中正确居中？我觉得我错过了一些混乱的初始设置.

Answer 1

您需要将其添加到HTML头中:

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

更多此处查看端口控制

目前使用您的HTML和下面更新的CSS它对我来说很好,.templeHeader是响应性的中心.

有关详细信息,请参阅代码段底部.

@import "bootstrap-sprockets";
@import "bootstrap";

@mixin center-both {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} 

* {
    margin:0; // It is a good idea to set these to zero at the start of
    padding:0; // your css and add them to each element individually as required
}

    .temple {
    /* background-image: image-url("temple.jpg"); */
    position: relative;
    height: 500px;
    background-color: black;
}

    .templeHeader {  //fixed this block where the curly braces were not properly defined 
        font-size: 52px;
        color: white;
        position: relative;
        text-align: center;
        @include center-both;
}

如果你想要"每个游客都看到太阳穴"要在较小的屏幕上不包裹多行,请使用以下媒体查询来更改某些宽度的字体大小

@media screen and (max-width:640px) {

   .templeHeader 

        { font-size:8vw; } //this query will give you a nice responsive header all
                          // the way through various devices

}