h5页面自适应电脑屏幕的代码
时间: 2023-07-28 22:10:47 浏览: 59
以下是一种常见的实现方式:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自适应页面</title>
<style type="text/css">
/* 设置页面最小宽度 */
body {
min-width: 320px;
}
/* 设置页面宽度为百分比 */
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
/* 设置图片宽度为百分比 */
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<!-- 页面内容 -->
<img src="example.jpg" alt="example image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel sapien viverra bibendum a vel nulla. Sed eget metus at leo bibendum imperdiet. Nullam malesuada, libero vitae malesuada suscipit, metus velit mollis elit, eu bibendum orci dolor at dui. Sed laoreet, urna vitae pretium venenatis, arcu mauris ullamcorper magna, a convallis nisl lacus quis ipsum. Praesent euismod felis at mauris malesuada, sed venenatis neque euismod. Duis vel vehicula libero. Nam euismod, mauris in volutpat posuere, dolor nibh condimentum dui, nec sollicitudin arcu neque at quam. Sed fringilla, lorem a rhoncus imperdiet, nisi nibh tristique sapien, vel lobortis augue orci at leo. Aliquam id ex vel tortor vestibulum porttitor. Duis non ex laoreet, bibendum elit sit amet, bibendum dui.</p>
</div>
</body>
</html>
```
上述代码中,通过设置容器的最大宽度和图片的最大宽度为百分比,实现了页面的自适应。同时,设置了页面的最小宽度,避免页面在较小屏幕上出现横向滚动条。