PC端浏览器自适应（火狐、谷歌、IE11），媒体查询@media

最新推荐文章于 2023-06-02 16:47:21 发布

麦兜_冰夕

最新推荐文章于 2023-06-02 16:47:21 发布

阅读量5.3k

点赞数 1

分类专栏：浏览器兼容问题响应式布局文章标签：浏览器分辨率自适应浏览器兼容浏览器自适应媒体查询media

本文链接：https://blog.csdn.net/lyn1772671980/article/details/78543479

版权

本文介绍了如何实现PC端浏览器的全屏自适应布局，特别是针对火狐、谷歌和IE11的兼容性处理。通过设置CSS样式和媒体查询@media，确保在不同分辨率下页面各元素等比例显示，避免滚动条和空白区域的出现。详细讲解了计算各元素百分比宽度和高度的方法，并给出了不同分辨率下的高度调整方案。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body,html,*{
padding:0px;
margin:0px;
}
div{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box;
}
.containner{
width: 100%;
height: 1080px;
background-color: #999;
}
.wrapper{
width: 98%;
height: 98%;
margin:0 auto;
background-color: rgba(20,220,28,0.5)
}
.top{
height: 10%;
width: 100%;
background-color: yellow;
}
.bottom{
height: 5%;
width: 100%;