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

Posted 2023-03-06

【中文标题】网站的主体和元素停留在 980px 宽度上，不会缩小

【英文标题】：Site's body and elements are stuck on 980px width, won't scale down

【发布时间】：2016-05-27 07:34:48

【问题描述】：

我正在尝试在 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 及其子项的最大宽度为100%，以便.templeHeader 在320px 视口中正确居中？我觉得我错过了一些搞砸的初始设置。

【问题讨论】：

你能用 js 摆弄一张图片，以便我们更好地了解问题所在吗？

除非你有 Sass->CSS 编译问题，只发布编译后的 CSS。

【参考方案1】：

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

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

更多信息请点击View port Control

目前使用您的 HTML 和下面更新的 CSS 对我来说工作正常，.templeHeader 响应居中。

更多信息请参见代码sn-p底部。

@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

【讨论】：

谢谢！！你已经减轻了很多令人头疼的事情！

【参考方案2】：

您应该记住正确缩进您的 html，如果不这样做可能会令人困惑。

你试过了吗

.temple, .temple * 
    width: 100%; 

我不确定你想用你的解释来实现所有这些代码的目的，你能澄清一下吗？在我看来，你不需要所有这些。