javascript - 使用 View 更改调整 CSS 设计

Question

我有以下代码:

function exportTableToExcel(tableID, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'excel_data.xls';
    
    // Create download link element
    downloadLink = document.createElement("a");
    
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
    
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
}

        .flex-container {
            width: 100%;
            height:98vh;
            display: flex;
            flex-wrap: wrap;
            background-color: DodgerBlue;
        }
        
        .flex-container > div {
            max-width: 100%;
            display: flex;
            flex-direction: column;
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
        #path, #skills {
               /* will prevent resizing horizontally */
               /* resize:vertical; */
               width: 250px;
               max-width: 250px;
               min-width: 250px;
        }
        table, td, th {  
            border: 1px solid #ddd;
            text-align: left;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }

<div class="flex-container">
        <div style="flex-grow: 1">
            <input id="path" placeholder="cvs path"/>
            <textarea id="skills" placeholder="Key skills" rows="4" cols="50"></textarea>
        </div>
        <div style="flex-grow: 9">            
            <table id="tblData" >
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>John Doe</td>
                    <td>john@gmail.com</td>
                    <td>USA</td>
                </tr>
                <tr>
                    <td>Michael Addison</td>
                    <td>michael@gmail.com</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>Sam Farmer</td>
                    <td>sam@gmail.com</td>
                    <td>France</td>
                </tr>
            </table>
            <button onclick="exportTableToExcel('tblData', 'members-data')">Export Table Data To Excel File</button>
        </div>
    </div>

在全浏览器屏幕上，设计更符合我的需要:

但是一旦更改了 View 大小，它看起来就不漂亮了，一旦 flex 拆分为垂直 View ，我需要进行 2 次更改:

1. 第一个 flex item 中的“input”和“textarea”要水平扩展到 90% 的 flex view
2. 调整表中数据的字体大小，使字体变小但易读

Answer 1

如 idfurw 所说，需要编写响应式 CSS，我确实改进了您的一些 CSS 代码。

function exportTableToExcel(tableID, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'excel_data.xls';
    
    // Create download link element
    downloadLink = document.createElement("a");
    
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
    
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
}

/* added */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.flex-container {
  width: 100%;
  min-height: 100vh; /* changed */
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  /* max-width: 100%;  can remove  */
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: 10px;
  background-color: #f1f1f1;
  font-size: clamp(1rem, 3vw, 2em); /* changed */
}

#path,
#skills {
  /* will prevent resizing horizontally */
  /* resize:vertical; */
  /* width: 250px; */
  /* max-width: 250px; */
  /* min-width: 250px; */
  width: 100%; /* added */
}
table,
td,
th {
  border: 1px solid #ddd;
  text-align: left;
}
table {
  border-collapse: collapse;
  width: 100%;
}

<div class="flex-container">
        <div style="flex-grow: 1">
            <input id="path" placeholder="cvs path"/>
            <textarea id="skills" placeholder="Key skills" rows="4" cols="50"></textarea>
        </div>
        <div style="flex-grow: 9">            
            <table id="tblData" >
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>John Doe</td>
                    <td>john@gmail.com</td>
                    <td>USA</td>
                </tr>
                <tr>
                    <td>Michael Addison</td>
                    <td>michael@gmail.com</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>Sam Farmer</td>
                    <td>sam@gmail.com</td>
                    <td>France</td>
                </tr>
            </table>
            <button onclick="exportTableToExcel('tblData', 'members-data')">Export Table Data To Excel File</button>
        </div>
    </div>