Javascript 如何根据浏览器窗口大小动态调整html表
我希望我的网站根据web浏览器的大小显示不同的内容。根据其他用户的问题/答案,我将其用于JavaScriptJavascript 如何根据浏览器窗口大小动态调整html表,javascript,jquery,html,Javascript,Jquery,Html,我希望我的网站根据web浏览器的大小显示不同的内容。根据其他用户的问题/答案,我将其用于JavaScriptonload。但我无法让它动态工作——也就是说,在用户调整窗口时,它是实时工作的。他们必须刷新才能更改网页的格式 这是我目前的代码: <table class="index_table" border="0"> <tr> <!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE --
onload
。但我无法让它动态工作——也就是说,在用户调整窗口时,它是实时工作的。他们必须刷新才能更改网页的格式
这是我目前的代码:
<table class="index_table" border="0">
<tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth > 900){
document.write('<td rowspan="3" class="index_article"></td>');
}
</script>
<!-- END OF JAVASCRIPT -->
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth < 900){
document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
}
</script>
<!-- END OF JAVASCRIPT -->
如果(window.innerWidth>900){
文件。写(“”);
}
在此处插入标题
在此处插入段落
在此处插入段落
密码:
验证密码:
在此插入列表
如果(窗内宽度<900){
文件。写(“”);
}
注意:我知道我不应该被用于表,我应该使用
div
s。但这是另一个问题。。。我开始建立这个网站之前,我知道。我也知道它很邋遢。所以请容忍我。在我有时间把它修好之前,我会一直坚持下去 如果(window.innerWidth>900){….
$(window).resize(function(){
if (window.innerWidth > 900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
}
}
$(窗口)。调整大小(函数(){
如果(window.innerWidth>900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('');
}
}
希望这会对您有所帮助,请确保包含First jquery.min.js您不应该使用JavaScript进行响应性web设计。使用CSS代替媒体查询。因此您可以编写HTML:
<table class="index_table" border="0">
<tr>
<!--This only will display on screen-width>900-->
<td id="big_device_index" rowspan="3" class="index_article"></td>
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>
您可以了解有关媒体查询的更多信息
}$(窗口)。调整大小(函数(){…});别难过,表和iFrame还没有死!而且不会在一个更近的将来出现。@GuillermoGutiérrez不确定你在看什么样的未来-它们很快就会在大多数新作品中死去。所以如果你能正式“接受”我的答案,我将不胜感激;)完成!对不起,我是新来的。我甚至不知道你能做到haha@red_trumpet使用
@media
查询可以解决我的问题吗
@media all and (max-width: 899px) {
#big_device_index {
display: none;
}
@media all and (min-width: 900px) {
#small_device_index {
display: none;
}