haot.hrbh2h.net 这个网页应该真么修改才能做到电脑端跟移动打开宽度高度自适应
时间: 2023-11-27 19:50:35 浏览: 27
要做到宽度高度自适应,可以使用CSS中的@media查询。您可以按照以下步骤进行操作:
1. 在HTML文档的<head>标签中添加以下代码,将页面宽度设置为设备的宽度:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
2. 在CSS样式表中添加@media查询,如下所示:
```
/* 默认样式 */
body {
font-size: 16px;
width: 960px;
margin: 0 auto;
}
/* 移动设备样式 */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
width: 100%;
}
}
/* 平板设备样式 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
body {
font-size: 16px;
width: 100%;
}
}
/* 桌面设备样式 */
@media screen and (min-width: 1025px) {
body {
font-size: 18px;
}
}
```
在上面的代码中,我们设置了三个@media查询,分别用于移动设备、平板设备和桌面设备。其中,max-width和min-width属性用于指定设备的宽度范围。
当设备的宽度小于等于768px时,应用移动设备样式;当设备的宽度在769px至1024px之间时,应用平板设备样式;当设备的宽度大于等于1025px时,应用桌面设备样式。
通过以上设置,您可以让网页在不同设备上都能够自适应宽度和高度。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![run](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)