首页写一个html页面，让它可以自适应不同设备屏幕的大小，在这个页面被缩小只占半屏时只显示一半

写一个html页面，让它可以自适应不同设备屏幕的大小，在这个页面被缩小只占半屏时只显示一半

时间: 2024-03-15 21:45:45 浏览: 88

好的，下面是一个实现自适应的HTML页面示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自适应页面示例</title> <style> body { margin: 0; padding: 0; height: 100%; overflow: hidden; } .container { height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .box { width: 50%; height: 100%; background-color: #f2f2f2; border: 1px solid #ccc; box-sizing: border-box; text-align: center; font-size: 24px; } </style> </head> <body> <div class="container"> <div class="box">左半屏</div> <div class="box">右半屏</div> </div> </body> </html> ``` 解释一下： - `body` 元素的 `height` 属性设置为 `100%` ，占满整个窗口的高度。 - `overflow` 属性设置为 `hidden` ，防止页面出现滚动条。 - `.container` 元素的 `height` 属性也设置为 `100%` ，并使用 `flex` 布局实现居中。 - `.box` 元素的 `width` 属性设置为 `50%` ，占满整个容器的一半宽度。 - 当页面被缩小只占半屏时，`.box` 元素会自动缩小，但由于 `flex-wrap` 属性设置为 `wrap` ，`.container` 元素会自动换行，所以只会显示左半屏的内容。希望这个示例可以帮助到你，如果还有问题可以继续提问哦！

阅读全文