Question

这里的任何帮助都会很棒。

我只是试图放置一个伸展100％屏幕的标题。在这个标题内是另一个包含文本的div。我在全屏看起来很好看，但当我调整文本堆栈的大小，以适应百分比。

如果我将容器宽度设置为像素而不是百分比，则标题不会拉伸窗口的整个长度，除非我指定像1463px这样的精确像素数量 - 这似乎不正确，因为它虽然它可能适合我的笔记本电脑/屏幕尺寸我觉得它不适用于最大化窗口的大屏幕。

我只是希望我的容器中的所有内容都能够根据浏览器宽度和高度的100％进行定位，但是使用百分比不允许我修复元素，以便在调整大小时保持这些元素。我一直在使用百分比，并且很难将它们固定在调整大小而不是像素尺寸，主要是因为使用百分比确保我的内容占据浏览器窗口的100％，而我无法确定使用像素时使用此功能。

   html, body {
       height: 100 % ;
       width: 100 % ;
       padding: 0;
       margin: 0;
   }

   .container {
       width: 100 % ;
       height: 100 % ;
       margin: 0 auto;
   }

   #
   topbar {
       height: 25px;
       background - color: #000000;
    width: 100%;
    }

    # topbartext {
           font - family: times;
           color: #ffffff;
           font - size: 11px;
           text - align: center;
           padding: 5px;
       }

文本是在调整大小期间移动的内容 - 当我使窗口变小时，文本只是堆叠在彼此的顶部以便仍然适合屏幕。我不希望它这样做 - 我只是希望它被修复而不是调整大小。

HTML：

<body>

    <div class="container">

        <div class="header">
            <div id="topbar">
                <div id="topbartext">$10 SHIPPING TO THE USA FOR ALL ORDERS OVER $150*++ FREE SHIPPING AND RETURNS ON AUSTRALIAN ORDERS OVER $50* ++ *<a href="#">FULL CONDITIONS</a>
                </div>
            </div>
        </div>

    </div>

</body>

Answer 1

百分比最适合这个。

如果您希望文本保留在一行中，可以将以下内容添加到html和css中：

HTML ...

<div id="topbartext" class="topbartext">

...的CSS

.topbartext {
  white-space: nowrap;
}

请注意：

在css中，最好使用类（.topbartext）而不是id（#topbartext）。
使用此方法意味着如果您使页面比文本更窄，则会添加水平滚动条（不理想）。你最好允许文本换行，在这种情况下你需要删除height: 25px;。

Answer 2

如上所述，您可以使用css媒体查询。这将需要一些谷歌搜索学习。

如果我正确理解你，你也可以在身体上使用min-width: 820px。这将确保您的身体永远不会低于某个宽度，如果它变得小于它，它将提供水平滚动条。

html,body {
  min-width: 820px;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

Demo Fiddle

Demo Fiddle Fullscreen

Answer 3

您可以使用media queries根据屏幕尺寸等参数更改内容样式。

Here's a demo using your example缩小文本并允许#topbar在屏幕小于800px宽时展开（当文本开始换行时）。

例如：

/* Normal styles that apply all the time*/
p    {
    font-size:1em;
}

/* Media query that applies if the display media is a screen
   and the condition between the brackets is met */
@media screen and (max-width:600px)    {
    p    {
         font-size:0.6em;
    }
}

你试图融入大量的文字，你可能最好通过删除固定的高度来允许周围的div扩展：

#topbar { ~~height：25px;~~ };

如果您想将所有内容都放在小屏幕上，这可能就是您的选择。

Answer 4

您是否尝试过使用JavaScript？我不确定你想要什么，因为你将顶部条形容器设置为固定高度，这意味着如果不调整高度，文本将不在容器中。这是一些强制宽度（或高度）为完整窗口大小的脚本（我也遇到了百分比问题）：

function resizeTopBar() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    var target = document.getElementById("topbar");

    target.style.width = width + "px";
}

window.onresize = function() {
    resizeTopBar();
}

脚本不会改变它的工作方式（文本将相互堆叠），因为你永远不会改变高度。如果您想要换高，请从height: 25px;移除topbar。

截图：
Screenshot

Answer 5

你可以试试这个： -

#topbartext {font-size: 1em;}

@media only screen and (min-width: 320px) and (max-width: 479px){
#topbartext{ font-size:25%;}
}

@media screen and (min-width: 480px) and (max-width: 767px){
#topbartext{font-size:50%;} 
}

@media only screen and (min-width: 768px) and (max-width: 959px){
#topbartext{ font-size:50%;}
}

@media screen and (min-width: 960px){
#topbartext{ font-size:70%;}
}

@media screen and (min-width: 1280px){
#topbartext{ font-size:100%;}
}

像素和百分比 - 调整浏览器大小时的问题

5 个答案: