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>

我的容器和排在＆＃34; temple＆＃34;因为我希望图像宽度为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及其子项的最大宽度为100％，以便.templeHeader在320px视口中正确居中？我觉得我错过了一些混乱的初始设置。

Answer 1

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

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

更多信息请点击View port Control

目前使用您的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;
}

如果你想要＆＃34;每个游客都能看到寺庙＆＃34;若要不在较小的屏幕上包裹多行，请使用以下媒体查询来更改某些宽度的字体大小

@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

}

Answer 2

你应该记得正确地缩进你的HTML，如果你不这样做会让你感到困惑。

你有没有试过

.temple, .temple * {
    width: 100%; }

我不确定你用你的解释用你所有的代码来实现什么，你能否澄清一下？在我看来，你并不需要这一切。

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

2 个答案: