老师，我有个大问题
老师，我用这个通用适配的方案做了一个页面，发现一个问题
当第一次打开的时候，手机适配ipone6/7/8是正确的，可是一旦刷新以后，适配就没了，就是媒体查询就消失了
设计稿：
高5402px
宽1920px
第一次打开：
刷新以后：
代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>专题</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/base.css"> </head> <body> <!--头部--> <header> <div class="header1"> <!-- <img src="images/header.png" alt="头部">--> </div> <div class="header2"> <img src="images/header2.png" alt=""> </div> </header> <div class="cloud23"> <img src="images/cloud23.png" alt=""> </div> <div class="cloud78"> <img src="images/cloud78.png" alt=""> </div> <div class="cloudd23"> <img src="images/cloudd23.png" alt=""> </div> <!--小屏时的背景图--> <div class="c23"> <img src="images/23_03.png" alt=""> </div> <div class="cd23"> <img src="images/78_07.png" alt=""> </div> <!--导语--> <div class="wrap"> <div class="lead clearfix"> <div class="lead-label"> <img src="images/lead.png" alt=""> </div> <div class="lead-talk"> 抓落实求实效，推动“我为群众办实事”措施落实。针对群众关注的痛点难点堵点问题，人社部确定为群众办实事的具体事项，实行一把手负责 抓落实求痛点难点堵点问题，人社部确定为群众办实事的具体事项，实行一把手负责 抓落实求实效，推动“我为群众办实事”措施落实。针对群众关注的痛点难点堵点问题， 抓落实求实效，推动“我为群众办实事”措施落实。针对群众关注的痛点难点堵点问题，人社部确定为群众办实事的具体事项，实行一把手负责 抓落实求痛点难点堵点问题，人社部确定为 </div> </div> </div> <!--主要内容--> <div class="wrap"> <div class="main" id="main"> <!-- 第一个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第2个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第3个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第4个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第5个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第6个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第7个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第8个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第9个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第10个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第11个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第12个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第13个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第14个item--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第15个item-->' <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <!-- 第十六个--> <div class="main-item clearfix"> <!-- 图片部分--> <div class="picture"> <img src="images/p1.png" alt=""> </div> <!-- 内容部分--> <div class="main-introduce"> <div class="main-introduce-title"> 李奇星：兢业尽责 </div> <div class="toggle-group"> <div class="toggle "> <div class="line"></div> </div> <div class="toggle2 "> <div class="line"></div> </div> <div class="clear"></div> </div> <div class="main-introduce-contain"> 为有效结合单位部门特色和实际、富有创造型地开展主题教育，各上其职目标 任务要求加快 为有效结合单位部门特色和实际、富有创造型地开展主题教育， 为有效结合单位部门特色和实际、富有创造型地开展主题教育，东方航空健身房看见说南方科技快加入了经费大开杀戒了公开赛的减肥了就死定了快速分解到山东省送快递分就够了 </div> </div> </div> <div class="clear"></div> </div> </div> <!--页脚--> <footer> <div class="wrap"> <p> 编辑：前你 吴珺 编辑：前你 吴珺 编辑：前你 吴珺<br> 新闻爆料热线：654664 新闻爆料热线：654664新闻爆料热线：654664<br> 云南网报价 云南网报价 云南网报价 云南网报价 <br> 滇广播电视节目滇广播电视节目滇广播电视节目<br> 电信增值业务jy电信增值业务jy电信增值业务jy电信增值业务jy<br> 互联网出版许可证内容联网出版许可证内容联网出版许可证内容联网出版许可证内容<br> 电信这增编号1232432435435电信这增编号1232432435435电信这增编号1232432435435<br> 未经云南网书面特别授违法权 未经云南网书面特别授违法权 未经云南网书面特别授违法权<br> 24小时网站违法和不良信息 24小时网站违法和不良信息 24小时网站违法和不良信息<br> </p> </div> </footer> <script src="js/index.js"></script> </body> </html>
.wrap{
/*padding-left: 0.12rem;*/
/*padding-right: 0.12rem;*/
width: 10.16rem;
margin:0 auto;
}
/*头部*/
header{
/*width: 1900px;*/
height: 622px;
overflow: hidden;
width: 100%;
}
@media (max-width: 375px) {
header {
height: 11.4rem;
}
}
header .header1{
background: url("../images/header.png") no-repeat top center;
/*width: 19rem;*/
width: 100%;
height: 100%;
}
/*header .header1 img{*/
/* width: 100%;*/
/*}*/
header .header2{
/*background:url("../images/header2.png") no-repeat center;*/
/*width: 3.75rem;*/
height: 100%;
width: 100%;
display: none;
}
header .header2 img{
width: 100%;
height: 100%;
}
@media (max-width: 375px) {
header .header1{
display: none;
}
header .header2{
display: block;
}
}
/*导语*/
.lead{
margin-top: 0.3rem ;
}
.lead-label,
.lead-talk{
float: left;
}
.lead-label{
margin-left: -0.66rem;
width: 0.66rem;
height: 2.06rem;
/*overflow: hidden;*/
}
.lead-label img{
width: 100%;
height: 100%;
}
@media (max-width: 375px) {
.lead-label{
display: none;
}
.lead-label{
width: 100%;
}
.wrap{
margin: 0;
width: 100%;
}
}
.lead-talk{
background-color: #e70112;
font-size: 15px;
color: #ffffff;
padding: 0.40rem;
line-height: 36px;
text-align: left;
width: 9.2rem;
/*overflow: hidden;*/
}
@media (max-width: 375px) {
.lead-talk{
width: 17.7rem;
}
}
@media (min-width: 1678px) {
.lead-talk{
height: 1.27rem;
}
}
/*内容*/
.main-item{
width: 10rem;
/*height:2.26rem;*/
margin-top: 0.3rem;
/*background-color: red;*/
}
@media (max-width: 375px) {
.main-item{
width: 17.7rem;
}
}
/*图片*/
.picture{
/*float: left;*/
width: 3.5rem;
height: 2.26rem;
/*overflow: hidden;*/
}
.picture img{
width: 100%;
height: 100%;
}
@media (max-width: 375px) {
.picture{
width: 17rem;
height: 100%;
margin-top: 10px;
}
}
.main-introduce{
/*float: right;*/
}
.main-introduce-title{
border: 0.01rem solid #cb8338;
/*line-height: 0.49rem;*/
color:#cb8338;
width: 6.26rem;
/*height: 0.49rem;*/
text-align: center;
font-weight: bold;
font-size: 20px;
background-color: #faf2e4;
}
@media (max-width: 375px) {
.main-introduce-title{
width: 17rem;
}
}
/*组件*/
.clear{
clear: both;
}
.toggle-group{
height: 0.26rem;
width: 6.26rem;
position: relative;
}
.toggle,.toggle2{
width: 1px;
height: 0.26rem;
position: absolute;
}
.toggle{
left: 0.4rem;
}
.toggle2{
right:0.4rem;
}
.line{
width: 100%;
height: 100%;
background-color: #cb8338;
position: absolute;
top: 0;
left: 0;
}
.line:after{
content: " ";
display: inline-block;
background-color: red;
width: 0.1rem;
height: 0.1rem;
border-radius: 50%;
position: absolute;
top: 0.26rem;
left: -0.04rem;
}
.line:before{
content: " ";
display: inline-block;
background-color: red;
width: 0.1rem;
height: 0.1rem;
border-radius: 50%;
position: absolute;
bottom: 0.26rem;
left: -0.04rem;
}
@media (max-width: 375px) {
.toggle-group{
width: 17rem;
}
}
/*内容*/
.main-introduce-contain{
/*height: 1.0rem;*/
width: 5.80rem;
padding: 0.24rem;
line-height: 31px;
font-size: 14px;
color: #000;
text-align: left;
border: 0.01rem solid #cb8338;
overflow: hidden;
text-indent: 2em;
background-color: #faf2e4;
/*background-color: red;*/
}
@media (max-width: 375px) {
.main-introduce-contain{
width: 16.52rem;
}
}
#main .main-item:nth-of-type(odd) .picture{ float: left;}
#main .main-item:nth-of-type(odd) .main-introduce{ float: right;}
#main .main-item:nth-of-type(even) .picture{ float: right;}
#main .main-item:nth-of-type(even) .main-introduce{ float: left;}
@media (max-width: 375px) {
#main .main-item:nth-of-type(odd) .picture{
margin-left: 14px;
}
}
@media (max-width: 375px) {
#main .main-item:nth-of-type(even) .picture{
margin-right: 14px;
}
#main .main-item:nth-of-type(even){
margin-left: 17px;
}
}
footer{
background-color:red ;
/*width: 1900px;*/
width: 99.9%;
margin-top: 0.31rem;
border: 0.01rem solid red;
padding:0.32rem 0 0.7rem 0 ;
}
p{
text-align: center;
font-size: 14px;
color: #ffffff;
line-height:18px ;
}
@media (max-width: 375px) {
footer .wrap{
margin: 0 auto;
}
footer{
width: 100%;
}
}
/*背景图*/
.cloud23{
position: absolute;
z-index: -1;
top: 900px;
/*width: 1900px;*/
width: 100%;
}
.c23{
position: absolute;
z-index: -1;
top: 900px;
display: none;
/*width: 375px;*/
width: 100%;
}
.cloud78{
position: absolute;
z-index: -1;
top: 2156px;
/*width: 1900px;*/
width: 100%;
}
.cloudd23{
position: absolute;
z-index: -1;
top: 3829px;
/*width: 1900px;*/
width: 100%;
}
.c23 img,.cloud23 img,.cloudd23 img,.cloud78 img{
width: 100%;
}
.cd23{
position: absolute;
z-index: -1;
top: 3829px;
display: none;
width: 375px;
overflow: hidden;
}
.cd23 img{
width: 100%;
}
/*背景图*/
@media (max-width:375px ) {
.cloud23{
display: none;
}
.c23{
display: block;
}
.cloud78{
display: none;
}
.cloudd23{
display: none;
}
.cd23{
display: block;
}
}base.css
.clearfix:after{
content: '';
display: block;
visibility: hidden;
clear: both;
}
.clear{
clear:both;
}reset.css
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-align:center;
box-sizing: border-box;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
font-size: 12px;
border: none;
background: none;
outline: none;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-position:outside;
list-style: none;
}
img, fieldset {
border:0 none;
vertical-align: top;
}
ins {
text-decoration:none;
}
a {
font-size: 12px;
color: #686868;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
[data-dpr="2"] body,
[data-dpr="2"] a,
[data-dpr="2"] input {
font-size: 24px;
}
[data-dpr="3"] body,
[data-dpr="3"] a,
[data-dpr="3"] input {
font-size: 36px;
}(function () {
'use strict';
// dpr->scale = 1 / dpr
var docEl = document.documentElement,
viewportEl = document.querySelector('meta[name="viewport"]'),
dpr = window.devicePixelRatio || 1,
maxWidth = 1920,
minWidth = 365;
dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
docEl.setAttribute('data-dpr', dpr);
docEl.setAttribute('max-width', maxWidth);
docEl.setAttribute('min-width', minWidth);
var scale = 1 / dpr,
content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';
if (viewportEl) {
viewportEl.setAttribute('content', content);
} else {
viewportEl = document.createElement('meta');
viewportEl.setAttribute('name', 'viewport');
viewportEl.setAttribute('content', content);
document.head.appendChild(viewportEl);
}
setRemUnit();
window.addEventListener('resize', setRemUnit);
function setRemUnit() {
var ratio = 18.75;
var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
// console.log(viewWidth);
if (maxWidth && (viewWidth / dpr > maxWidth)) {
viewWidth = maxWidth * dpr;
} else if (minWidth && (viewWidth / dpr < minWidth)) {
viewWidth = minWidth * dpr;
}
docEl.style.fontSize = viewWidth / ratio + 'px';
}
})();34
收起
正在回答
2回答
你好同学，因为切换不会重新执行代码，它的适配还是按照原来的。而刷新页面则会重新执行所有代码，重新获取现在的页面宽度。适配也就变化了。
例如当页面切换到375px，刷新页面。因为宽度已经变为375px，375px是设备的宽度。由于页面的缩放比为0.5 （同学可以在自己的js代码中输出一下缩放比）。所以你看到的页面只是视觉上缩小了。即在手机端页面的实际宽度还是750px。但是css中的媒体查询是设置页面最大宽度为375px。临界值没有到750px，媒体查询的代码就不会生效的。所以媒体查询参考老师回复的第二条，改为750px，或者换成设备的宽度375px，css样式才会生效哦。
祝学习愉快，望采纳。
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星