Question

基本上，我想做的是创建一个表格，让人们输入电子邮件以获取一些信息。我想为桌面视图和移动视图创建一个html文件，以便当窗口狭窄时窗体的宽度占据75％的屏幕，而当窗口宽敞时窗体的宽度占据35％的屏幕。我的脚本现在会在首次加载html文档时创建正确大小的窗口，但是当我调整窗口大小时不会重新调整它的大小。我的代码有什么错？

<div id="center" class="container-fluid" font-size=13px; onresize="resize()">
           <script>
              out = "75%"
               if (window.innerWidth > window.innerHeight){
                   out = "35%"
               } else{
                   out = "80%"
               }                  
              document.getElementById("center").style.width = out;
              document.getElementsByTagName("BODY")[0].onresize = function() {myFunction()};
              function resize(){
              out = "75%"
               if (window.innerWidth > window.innerHeight){
                   out = "35%"
               } else{
                   out = "80%"
               }

              document.getElementById("center").style.width = out;
              }
           </script>
</div>

Answer 1

使用CSS media queries。

在CSS中放置以下内容：

return

Answer 2

您需要将此代码挂钩到调整窗口大小时发生的事件。将代码放入函数中，然后从窗口加载和窗口大小调整事件中调用该函数，例如：

sed -e '/${VAR_A_TO_BE_DELETED}/ {/${VAR_B_DONT_DELETE}/! s/$VAR_A_TO_BE_DELETED/STRING_TO_MARK_DELETION/}' $FILE_NAME | grep -v STRING_TO_MARK_DELETION > temp_file; mv temp_file $FILE_NAME

如何创建可调整CSS表单宽度的JavaScript脚本？

2 个答案: