关于自适应网站内容

Question

所以..使用Google Chrome功能，使我可以看到您的网站在不同设备上的外观。例如，如果我将px的静态大小设置为div，例如在更大的屏幕尺寸上，如何使该div在空白处扩展？

Answer 1

由于自适应设计基于大视口的概念，因此您可以更频繁地使用视口单位（例如vw（视口宽度）和vh（视口高度））来帮助自己。您会发现，使用这些单位而不是px可以节省很多时间和麻烦。这些单位也可以用于字体大小，并且缩放比例很好。

Answer 2

假设您希望div为100px，请在CSS中添加render() { return ( <div> <CSVReader label="Select CSV file" onFileLoaded={this.handleFile} /> <br /> <p>Length: {this.state.sampleData[0].length}</p> <table> <thead> <tr>{this.state.headers.map((a, i) => <th key={i}>{a}</th>)}</tr> </thead> <tbody> {this.state.sampleData.map((a, i) => <tr key={i}> {a.map((b, j) => <td key={j}>{b}</td>)} </tr> )} </tbody> </table> </div> ) } 。 然后，您可以添加min-width: 100px，以便在大于100像素的屏幕上展开。