Html 如何使网页自动更改其宽度？_Html_Expand_Liquid Layout

Html 如何使网页自动更改其宽度？

html

Html 如何使网页自动更改其宽度？,html,expand,liquid-layout,Html,Expand,Liquid Layout,在HTML中，有没有一种方法可以使网页扩展到用户的监视器？比如说我有15英寸，但其他人有24英寸。网页在他们的屏幕上会很小，但可以放在最小值上。如何将页面扩展到100%，或者可能是95%？除非您自己明确设置大小，否则页面将默认使用浏览器窗口的全宽您可能会发现Firefox的Web Developer插件非常有用，因为它允许您快速将浏览器窗口更改为特定大小，以便您可以查看不同大小的布局在html中： <div id="content"> <!-- Some content i

在HTML中，有没有一种方法可以使网页扩展到用户的监视器？比如说我有15英寸，但其他人有24英寸。网页在他们的屏幕上会很小，但可以放在最小值上。如何将页面扩展到100%，或者可能是95%？

除非您自己明确设置大小，否则页面将默认使用浏览器窗口的全宽

您可能会发现Firefox的Web Developer插件非常有用，因为它允许您快速将浏览器窗口更改为特定大小，以便您可以查看不同大小的布局

在html中：

<div id="content">
<!-- Some content in here -->
<div>

或更多控制：

#content {
    min-width:500px;
    max-width:1000px;
}

除非为网页的任何元素（如正文或某些包含div的元素）指定特定的宽度，否则它将扩展到浏览器窗口的宽度

如果希望将以像素为单位的大小设置为用户的宽度，则可以使用javascript动态设置宽度：

<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
</script>


var userWidth=screen.width；
var userHeight=screen.height；

但是，您可能应该使用更流畅的布局，该布局将通过使用百分比指定的宽度自动展开（例如，使用CSS设置元素的宽度：

宽度：100%

）

流体宽度是通过使用百分比单位或em单位实现的。这是一个基于网格和容器的网站布局

HTML只是描述（文本）内容含义的一种工具。例如，

Foobar

仅仅意味着

Foobar

是一个一级标题，但没有说明它应该显示的样式

为了设计HTML文档的样式，引入了。但是CSS也只是一种描述语言，它不知道任何有关CSS的信息。（您可以只描述特定元素应以特定宽度显示，以此类推。）

但是JavaScript确实知道用户代理。您可以使用

屏幕

对象来获取屏幕或可用屏幕的

宽度

和

高度

。

我认为对于Bob是否询问显示器的实际大小或窗口大小存在一些混淆

Josh Stodola和Rich Bradshaw提供了HTML/CSS答案，该答案使用百分比创建随窗口扩展的流畅布局。下面的代码总结了这种技术，创建了两列，一列占当前浏览器窗口的80%，另一列占20%。当用户更改窗口大小时，列大小也会改变

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        width: 80%;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        width: 20%;
        float: left;
    }
</style>
</head>
<body>
<body>

<div id="content1"></div>

<div id="content2"></div>

</html>


#内容1{
背景：#CC0000；
高度：300px；
宽度：80%；
浮动：左；
}
#内容2{
背景：#00CC00；
高度：300px；
宽度：20%；
浮动：左；
}

Rudd Zwolinski提供了寻找用户当前分辨率的答案。其他人已经发布了使用这种方法可能带来的麻烦，但我不知道，也许你在对分辨率大小做一些艺术性的陈述。下面是使用此方法的上述相同代码：

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        float: left;
    }
</style>
<script type="text/javascript">
    var userWidth = screen.width;
    var userHeight = screen.height;

    function resizeContent()
    {
        document.getElementById("content1").style.width = parseInt(userWidth * 0.8);
        document.getElementById("content2").style.width = parseInt(userWidth * 0.2);
    }
</script>
</head>
<body onload="resizeContent()">

<div id="content1"></div>

<div id="content2"></div>

</html>


#内容1{
背景：#CC0000；
高度：300px；
浮动：左；
}
#内容2{
背景：#00CC00；
高度：300px；
浮动：左；
}
var userWidth=screen.width；
var userHeight=screen.height；
函数resizeContent（）
{
document.getElementById（“content1”）.style.width=parseInt（userWidth*0.8）；
document.getElementById（“content2”）.style.width=parseInt（userWidth*0.2）；
}

希望能有所帮助。

秋葵，你说的“页面”是指网页内容还是包含页面的窗口？如果你指的是窗口，答案是不要。如果你指的是内容，你可以使用液体布局；在另一个被标记为重复的线程中，它询问如何自动调整您已经响应的网站的大小以适应移动屏幕。它没有得到答案，从这里我可以看到，这个线程也没有回答这个问题

由于我最近经历了同样的问题，我将分享我的发现

对于那些使用HTML5编写页面代码的用户，为了使您的页面“移动友好”，您必须添加以下代码：

。有些人告诉其他人将其编写为

，但是

用户可伸缩=yes

不是必需的。我访问过的每一个声誉良好的操作网站，包括W3Schools.org网站，这些信息总是被忽略。你不需要它

如果我将上述代码从页面中删除，当我将它们加载到手机上时，它们会自动调整大小以适应屏幕的宽度。然而，他们没有通过手机友好测试。如果我在我的页面上插入上述代码，我必须在手机上加载页面时手动缩小页面。这是我无法接受的。它应该显示整个页面，让用户向上扩展，而不是相反

我发现满足这两个条件的解决方案是：

我的网站不仅验证为“手机友好型”，还自动调整大小以适应手机屏幕宽度

对于那些已经寻找这个解决方案一段时间了（至少从我看到这个问题的一些日期算起的过去4年），并且还没有发现它的人，欢迎您

世界上没有一款软件是根据显示器的英寸来确定大小的。你需要像素。调整浏览器的大小肯定会让你的用户感到厌烦。我必须使用一个费用报告工具来完成这项工作。我们这些拥有更大显示器的人通常不希望或不需要一个最大化的窗口。极客们，在发布愚蠢的评论之前阅读问题。永远，永远，永远，永远，永远，永远不要强迫访问者调整窗口大小。使用固定大小的页面布局是可以的（但我几乎不可以），这需要用户自己调整窗口的大小，但即使这样，如果没有真实的附加值，也肯定会激怒访问者

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        float: left;
    }
</style>
<script type="text/javascript">
    var userWidth = screen.width;
    var userHeight = screen.height;

    function resizeContent()
    {
        document.getElementById("content1").style.width = parseInt(userWidth * 0.8);
        document.getElementById("content2").style.width = parseInt(userWidth * 0.2);
    }
</script>
</head>
<body onload="resizeContent()">

<div id="content1"></div>

<div id="content2"></div>

</html>