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

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

html css

Html 像素和百分比-调整浏览器大小时出现的问题,html,css,resize,percentage,pixels,Html,Css,Resize,Percentage,Pixels,这里的任何帮助都会很好我只是简单地尝试放置一个标题，它可以延伸100%的屏幕。在这个标题中是另一个包含文本的div。我所拥有的东西在全屏显示时看起来不错，但当我向下调整彼此顶部的文本堆栈以适应百分比时如果我将容器宽度设置为像素而不是百分比，标题不会拉伸窗口的整个长度，除非我指定一个精确的像素量，如1463px——这似乎不正确，因为虽然它可能适合我的笔记本电脑/屏幕尺寸，但我觉得它无法在具有最大化窗口的更大屏幕上工作我只是希望容器中的所有内容都能够根据100%的浏览器宽度和高度进行定位，但使

这里的任何帮助都会很好

我只是简单地尝试放置一个标题，它可以延伸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>


如果订单金额超过$150*++免费送货至美国，则运费为$10，如果澳大利亚订单金额超过$50*++则退货*

百分比是最好的选择

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

html

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

请注意：

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

如上所述，您可以使用css媒体查询。这需要一些谷歌搜索来学习
如果我理解正确，您也可以在车身上使用最小宽度：820px
。这将确保你的身体永远不会低于某个特定的宽度，如果它小于该宽度，它将提供一个水平滚动条
html,body {
  min-width: 820px;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}


您可以使用根据屏幕大小等参数更改内容样式
当屏幕宽度小于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：
#顶栏{高度：25px；}
如果你想把所有的内容都放在一个小屏幕上，这可能是最好的选择
 您尝试过使用JavaScript吗？我不确定您想要什么，因为您正在将顶部栏容器设置为固定高度，这意味着如果不调整高度，文本将脱离容器。下面是一些脚本，用于强制将宽度（或高度）设置为全窗口大小（我在百分比方面也遇到了问题）：
脚本不会更改其工作方式（文本将彼此堆叠），因为您从未更改高度。如果您希望包裹高度，请删除height:25px来自顶栏

屏幕截图：

您可以尝试以下方法：-
#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%;}
}

使用css媒体查询谢谢mate-这很有帮助。另一件事——假设我将包装的宽度设置为960px，这是否会与在更大屏幕的浏览器中显示的屏幕相同？像Mac桌面吗？960px是大多数浏览器的安全宽度吗？960并不比任何其他固定宽度更安全。正如其他人提到的，您可能应该考虑使用。
function resizeTopBar() {
    var width = window.innerWidth;
    var height = window.innerHeight;

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

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

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

#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%;}
}