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

来源：互联网发布：区块链雷电网络众筹编辑：程序博客网时间：2024/05/21 11:12

<!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%;
background-color: blue;
}
.content{
width: 100%;
height:83%;
margin: 1% 0 1% 0;
border:3px dashed purple;
}
.child-top{
width: 100%;
height: 40%;
overflow: hidden;
}
.chile-one{
width:60%;
height: 100%;
border: 1px solid green;
margin-right:2%;
float: left;
}
.chile-two{
width:30%;
height: 100%;
border: 1px solid red;
margin-right:2%;
float: left;
}
.chile-bottom{
width: 100%;
height: 60%;
background-color: pink;
}
/*注释：
a.此方案适用于PC端宽度自适应，高度会出现滚动条的情况
b.由于UI设计按照1920*1080的分辨率设计的，所以要实现自适应需先算出各部分子元素的百分比，来实现流布局
c.此方案优势：可实现不同分辨率下各模块等比例显示；
c.PC端各分辨率下根元素高的计算方法：Height = (1080/1920)*当前分辨率width;Weight = 100%【即当前分辨率下浏览器可视区域的宽度】;各子元素宽计算方法：(【1920*1082分辨率下设计的实际宽度】/1920)*100%,子元素高计算方法同宽的计算方法
d.由于PC端屏幕分辨率比例不同，所以根据1080*1920分辨率的比例计算出的根元素的宽高可能会出现两种情况：
1.浏览器页面可视区域的高度 > 页面计算得到的根元素高度现象：页面纵向出现空白
eg:1400*1050分辨率下，计算得根元素div.containner的Height = (1080*1920)*1400 = 787.5px,
但浏览器页面可视区域的高度window.innerHeight = 【谷歌：944px】、【火狐：917px】、【IE11：932px】,
。
解决办法：见【不符合比例出现空白的处理方法】
原理：页面根元素的高度 = Max(window.innerHeight) ——> 取当前分辨率下浏览器页面可视区域的高度的最大值
实现结果：页面不出现滚动条或出现纵向滚动条
2.浏览器页面可视区域的高度 <= 页面计算得到的根元素高度现象：此现象合理
解决办法：见【符合比例不出现空白的处理方法】

*/
/*
符合比例不出现空白的处理方法:
*/
@media screen and (max-width: 1680px) and (max-height: 1050px){
.containner{
height: 945px;
/*(1080*1920)*1680 = 945*/
}
}
@media screen and (max-width: 1600px) and (max-height: 900px){
.containner{
height: 900px;
}
}
@media screen and (max-width: 1440px) and (max-height: 900px){
.containner{
height: 810px;
}
}
@media screen and (max-width: 1366px) and (max-height: 768px){
.containner{
height: 810px;
}
}
@media screen and (max-width: 1360px) and (max-height: 768px){
.containner{
height: 765px;
}
}
@media screen and (max-width: 1280px) and (max-height: 800px){
.containner{
height: 720px;
}
}
/*不符合比例出现空白的处理方法*/
@media screen and (max-width: 1400px) and (max-height: 1050px){
.containner{
height: 944px;
/*window.innerHeight = 【谷歌：944px】、【火狐：917px】、【IE11：932px】,取做最大值*/
}
}
@media screen and (max-width: 1280px) and (max-height: 918px){
.containner{
height: 918px;
}
}
@media screen and (max-width: 1280px) and (max-height: 854px){
.containner{
height: 854px;
}
}
</style>
<body>
<div class = "containner">
<div class = "wrapper">
<div class="top">导航</div>
<div class="content">
<div class="child-top">
<div class="chile-one">child-left</div>
<div class="chile-two">child-right</div>
</div>
<div class="chile-bottom">child-bottom</div>
</div>
<div class="bottom">底部</div>
</div>
</div>
</body>
</html>

阅读全文

0 0