Javascript 调整浏览器大小时html组件的比例大小_Javascript_Html_Css

Javascript 调整浏览器大小时html组件的比例大小

javascript html css

Javascript 调整浏览器大小时html组件的比例大小,javascript,html,css,Javascript,Html,Css,我正在处理一个页面，其中显示了一些html组件（令人惊讶的是：p）要求是所有这些html组件的大小都会根据浏览器窗口的重新大小或客户端分辨率的变化而变化例如，如果已将浏览器窗口的大小减少到一半，如何使组件自动减少到一半任何指向这一点的指针都会有所帮助编辑：组件需要保持从左到右的顺序不变，即在需要时引入水平滚动条。假设您希望在不使用JavaScript的情况下尽可能轻松地实现这一点。在css中，确保要重新调整大小的任何对象的宽度和高度属性是百分比，而不是像素。此外，如果您需要重新调整子组

我正在处理一个页面，其中显示了一些html组件（令人惊讶的是：p）

要求是所有这些html组件的大小都会根据浏览器窗口的重新大小或客户端分辨率的变化而变化

例如，如果已将浏览器窗口的大小减少到一半，如何使组件自动减少到一半

任何指向这一点的指针都会有所帮助

编辑：
组件需要保持从左到右的顺序不变，即在需要时引入水平滚动条。

假设您希望在不使用JavaScript的情况下尽可能轻松地实现这一点。在css中，确保要重新调整大小的任何对象的宽度和高度属性是百分比，而不是像素。此外，如果您需要重新调整子组件的大小，请将其设置为一个百分比

例如

    <html>
<body>

<style type="text/css">
    .alignLeft{ 
            float:left;
        }

    .container
    {
        width: 80%; 
        background-color:#ccc;
        float: left;
    }

    .fixedContainer
    {
        width: 900px;
        float: left;
        background-color:#aaa;

    }

    table
    {
       width: 300px;
       float: left;

    }
</style>

<div class="container">

<div class="fixedContainer">

<table class="searchCriteria alignLeft" cellpadding="1%"> 

 <tr> 
 <td><label for="proposalRefNum">Proposal Id :</label></td>
 <td><input type="text" name="proposalRefNum" onchange="removeSearchResults()" class="searchControl" value="" id="proposalRefNum" title="Type the Proposal RefNum you are looking for"></td> 
 </tr> 

  <tr> 
 <td><label for="proposalName">Name :</label></td> 
 <td><input type="text" name="Proposal Name" onchange="removeSearchResults()" value="" id="proposalName" class="searchControl" title="Type the Proposal description you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalDescription">Description :</label></td> 
 <td><textarea rows="2" name="Proposal description" onchange="removeSearchResults()" id="proposalDescription" class="searchControl" title="Type the Proposal description you are looking for"></textarea></td> 
 </tr> 

 <tr> 
 <td><label for="proposalApplication">Application :</label></td> 
 <td><select class="searchControl" name="application" id="proposalApplication" onchange="removeSearchResults()" title="Select the application for which you are searching the proposals">
    <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr> 

</table>


<table class="searchCriteria alignLeft" cellpadding="10px"> 

 <tr> 
 <td><label for="proposalReleaseCandidateRefNum">Release Candidate Id :</label></td>
 <td><input type="text" name="releaseCandidateRefNum" onchange="removeSearchResults()" class="searchControl"value="" id="proposalReleaseCandidateRefNum" title="Type the release Candidate RefNum you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalCreator">Creator :</label></td> 
 <td><input type="text" name="Proposal creator" onchange="removeSearchResults()"value="" id="proposalCreator" class="searchControl" title="Creator of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalOwner">Owner :</label></td> 
 <td><input type="text" name="Proposal Owner" onchange="removeSearchResults()"value="" id="proposalOwner" class="searchControl" title="Owner of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalLastUpdatedBy">LastUpdatedBy :</label></td> 
 <td><input type="text" name="Proposal Last Updated By" onchange="removeSearchResults()"value="" id="proposalLastUpdatedBy" class="searchControl" title="Users who last updated the proposals you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalStatus" >Status:</label></td> 
 <td><select class="searchControl" onchange="removeSearchResults()" name="status" id="proposalStatus" title="Status of the proposals you are looking for">
     <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr>
</table> 

</div>
</div>

</body>
</html>

如果这是您的html

其中container div是要自动调整大小的html组件

不是这个

通过使用本例中的百分比，例如，您的浏览器总宽度最初为1000px；容器类div将以800px的速度显示，而childContainer类将以400px的速度显示。如果用户将浏览器缩小到500px的宽度，容器类将缩小到400px，子容器将缩小到200px

换句话说，任何子容器的宽度百分比都基于父容器的当前宽度。如果没有父容器，则百分比宽度相对于html正文标记，大多数情况下是整个浏览器窗口的宽度

这是基于您的样本的标记

    <html>
<body>

<style type="text/css">
    .alignLeft{ 
            float:left;
        }

    .container
    {
        width: 80%; 
        background-color:#ccc;
        float: left;
    }

    .fixedContainer
    {
        width: 900px;
        float: left;
        background-color:#aaa;

    }

    table
    {
       width: 300px;
       float: left;

    }
</style>

<div class="container">

<div class="fixedContainer">

<table class="searchCriteria alignLeft" cellpadding="1%"> 

 <tr> 
 <td><label for="proposalRefNum">Proposal Id :</label></td>
 <td><input type="text" name="proposalRefNum" onchange="removeSearchResults()" class="searchControl" value="" id="proposalRefNum" title="Type the Proposal RefNum you are looking for"></td> 
 </tr> 

  <tr> 
 <td><label for="proposalName">Name :</label></td> 
 <td><input type="text" name="Proposal Name" onchange="removeSearchResults()" value="" id="proposalName" class="searchControl" title="Type the Proposal description you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalDescription">Description :</label></td> 
 <td><textarea rows="2" name="Proposal description" onchange="removeSearchResults()" id="proposalDescription" class="searchControl" title="Type the Proposal description you are looking for"></textarea></td> 
 </tr> 

 <tr> 
 <td><label for="proposalApplication">Application :</label></td> 
 <td><select class="searchControl" name="application" id="proposalApplication" onchange="removeSearchResults()" title="Select the application for which you are searching the proposals">
    <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr> 

</table>


<table class="searchCriteria alignLeft" cellpadding="10px"> 

 <tr> 
 <td><label for="proposalReleaseCandidateRefNum">Release Candidate Id :</label></td>
 <td><input type="text" name="releaseCandidateRefNum" onchange="removeSearchResults()" class="searchControl"value="" id="proposalReleaseCandidateRefNum" title="Type the release Candidate RefNum you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalCreator">Creator :</label></td> 
 <td><input type="text" name="Proposal creator" onchange="removeSearchResults()"value="" id="proposalCreator" class="searchControl" title="Creator of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalOwner">Owner :</label></td> 
 <td><input type="text" name="Proposal Owner" onchange="removeSearchResults()"value="" id="proposalOwner" class="searchControl" title="Owner of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalLastUpdatedBy">LastUpdatedBy :</label></td> 
 <td><input type="text" name="Proposal Last Updated By" onchange="removeSearchResults()"value="" id="proposalLastUpdatedBy" class="searchControl" title="Users who last updated the proposals you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalStatus" >Status:</label></td> 
 <td><select class="searchControl" onchange="removeSearchResults()" name="status" id="proposalStatus" title="Status of the proposals you are looking for">
     <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr>
</table> 

</div>
</div>

</body>
</html>


.alignLeft{
浮动：左；
}
.集装箱
{
宽度：80%；
背景色：#ccc；
浮动：左；
}
.固定容器
{
宽度：900px；
浮动：左；
背景色：#aaa；
}
桌子
{
宽度：300px；
浮动：左；
}
提案编号：
姓名：
说明：
应用程序：
任何
发布候选Id:
造物主：
所有者：
最新更新人：
地位：
任何

假设您希望在不使用JavaScript的情况下尽可能轻松地完成此操作。在css中，确保要重新调整大小的任何对象的宽度和高度属性是百分比，而不是像素。此外，如果您需要重新调整子组件的大小，请将其设置为一个百分比

例如

    <html>
<body>

<style type="text/css">
    .alignLeft{ 
            float:left;
        }

    .container
    {
        width: 80%; 
        background-color:#ccc;
        float: left;
    }

    .fixedContainer
    {
        width: 900px;
        float: left;
        background-color:#aaa;

    }

    table
    {
       width: 300px;
       float: left;

    }
</style>

<div class="container">

<div class="fixedContainer">

<table class="searchCriteria alignLeft" cellpadding="1%"> 

 <tr> 
 <td><label for="proposalRefNum">Proposal Id :</label></td>
 <td><input type="text" name="proposalRefNum" onchange="removeSearchResults()" class="searchControl" value="" id="proposalRefNum" title="Type the Proposal RefNum you are looking for"></td> 
 </tr> 

  <tr> 
 <td><label for="proposalName">Name :</label></td> 
 <td><input type="text" name="Proposal Name" onchange="removeSearchResults()" value="" id="proposalName" class="searchControl" title="Type the Proposal description you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalDescription">Description :</label></td> 
 <td><textarea rows="2" name="Proposal description" onchange="removeSearchResults()" id="proposalDescription" class="searchControl" title="Type the Proposal description you are looking for"></textarea></td> 
 </tr> 

 <tr> 
 <td><label for="proposalApplication">Application :</label></td> 
 <td><select class="searchControl" name="application" id="proposalApplication" onchange="removeSearchResults()" title="Select the application for which you are searching the proposals">
    <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr> 

</table>


<table class="searchCriteria alignLeft" cellpadding="10px"> 

 <tr> 
 <td><label for="proposalReleaseCandidateRefNum">Release Candidate Id :</label></td>
 <td><input type="text" name="releaseCandidateRefNum" onchange="removeSearchResults()" class="searchControl"value="" id="proposalReleaseCandidateRefNum" title="Type the release Candidate RefNum you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalCreator">Creator :</label></td> 
 <td><input type="text" name="Proposal creator" onchange="removeSearchResults()"value="" id="proposalCreator" class="searchControl" title="Creator of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalOwner">Owner :</label></td> 
 <td><input type="text" name="Proposal Owner" onchange="removeSearchResults()"value="" id="proposalOwner" class="searchControl" title="Owner of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalLastUpdatedBy">LastUpdatedBy :</label></td> 
 <td><input type="text" name="Proposal Last Updated By" onchange="removeSearchResults()"value="" id="proposalLastUpdatedBy" class="searchControl" title="Users who last updated the proposals you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalStatus" >Status:</label></td> 
 <td><select class="searchControl" onchange="removeSearchResults()" name="status" id="proposalStatus" title="Status of the proposals you are looking for">
     <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr>
</table> 

</div>
</div>

</body>
</html>

如果这是您的html

其中container div是要自动调整大小的html组件

不是这个

这是基于您的样本的标记

    <html>
<body>

<style type="text/css">
    .alignLeft{ 
            float:left;
        }

    .container
    {
        width: 80%; 
        background-color:#ccc;
        float: left;
    }

    .fixedContainer
    {
        width: 900px;
        float: left;
        background-color:#aaa;

    }

    table
    {
       width: 300px;
       float: left;

    }
</style>

<div class="container">

<div class="fixedContainer">

<table class="searchCriteria alignLeft" cellpadding="1%"> 

 <tr> 
 <td><label for="proposalRefNum">Proposal Id :</label></td>
 <td><input type="text" name="proposalRefNum" onchange="removeSearchResults()" class="searchControl" value="" id="proposalRefNum" title="Type the Proposal RefNum you are looking for"></td> 
 </tr> 

  <tr> 
 <td><label for="proposalName">Name :</label></td> 
 <td><input type="text" name="Proposal Name" onchange="removeSearchResults()" value="" id="proposalName" class="searchControl" title="Type the Proposal description you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalDescription">Description :</label></td> 
 <td><textarea rows="2" name="Proposal description" onchange="removeSearchResults()" id="proposalDescription" class="searchControl" title="Type the Proposal description you are looking for"></textarea></td> 
 </tr> 

 <tr> 
 <td><label for="proposalApplication">Application :</label></td> 
 <td><select class="searchControl" name="application" id="proposalApplication" onchange="removeSearchResults()" title="Select the application for which you are searching the proposals">
    <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr> 

</table>


<table class="searchCriteria alignLeft" cellpadding="10px"> 

 <tr> 
 <td><label for="proposalReleaseCandidateRefNum">Release Candidate Id :</label></td>
 <td><input type="text" name="releaseCandidateRefNum" onchange="removeSearchResults()" class="searchControl"value="" id="proposalReleaseCandidateRefNum" title="Type the release Candidate RefNum you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalCreator">Creator :</label></td> 
 <td><input type="text" name="Proposal creator" onchange="removeSearchResults()"value="" id="proposalCreator" class="searchControl" title="Creator of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalOwner">Owner :</label></td> 
 <td><input type="text" name="Proposal Owner" onchange="removeSearchResults()"value="" id="proposalOwner" class="searchControl" title="Owner of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalLastUpdatedBy">LastUpdatedBy :</label></td> 
 <td><input type="text" name="Proposal Last Updated By" onchange="removeSearchResults()"value="" id="proposalLastUpdatedBy" class="searchControl" title="Users who last updated the proposals you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalStatus" >Status:</label></td> 
 <td><select class="searchControl" onchange="removeSearchResults()" name="status" id="proposalStatus" title="Status of the proposals you are looking for">
     <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr>
</table> 

</div>
</div>

</body>
</html>


.alignLeft{
浮动：左；
}
.集装箱
{
宽度：80%；
背景色：#ccc；
浮动：左；
}
.固定容器
{
宽度：900px；
浮动：左；
背景色：#aaa；
}
桌子
{
宽度：300px；
浮动：左；
}
提案编号：
姓名：
说明：
应用程序：
任何
发布候选Id:
造物主：
所有者：
最新更新人：
地位：
任何

在这里你会经常听到这句话：。有一个可附加函数以调整所有组件的大小，例如

$(window).resize(function() {
    //resize the components.
});

正如@pat8719所说，要获得高度和宽度比例，您只需在CSS中将其设置为百分比，这仅在您希望在某些阈值下更改字体/边框大小，或者在屏幕大小太小时进行折叠组件之类的操作时才有用。

您经常会在这里听到这一点：。有一个可附加函数以调整所有组件的大小，例如

$(window).resize(function() {
    //resize the components.
});

我在此处添加了示例html-。我如何在这里实现它，我没有在这里显式地设置任何组件的宽度。@kshitij在您的表周围放置一个包装div，并将该div宽度设置为一个百分比。我已将一个基于您的样本的完整样本放入我的原始文件中answer@kshitij此外，您最好将表格布局替换为基于div的布局，以便获得更清晰的标记和更多内容可预测的行为。表格通常应该保留给实际上是表格数据的内容，例如电子表格、统计数据等的一部分。输入的样本没有很好地处理大小调整。它将第二个表放在第一个表的下面，而我需要它们并排出现，即使这意味着引入一个水平滚动条。@kshitij好的，我已经更改了原始帖子中的代码，以反映您需要的内容。我还为各种容器添加了背景色，以帮助准确说明正在发生的事情。请注意，您可以删除我包含的浮点属性，我只是简单地添加了它们，以便显示背景色