前端页面pc端通过控制台切换移动端屏幕不能撑满问题解决方案

最新推荐文章于 2024-07-20 18:16:53 发布

MFG_666

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量1.1k

点赞数

分类专栏： html Css 自适应文章标签：前端 javascript html pc端移动端适配

本文链接：https://blog.csdn.net/m0_49714202/article/details/125384462

版权

html 同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

Css

46 篇文章 0 订阅

订阅专栏

自适应

12 篇文章 0 订阅

订阅专栏

解决方案

当手机在pc端正常显示的时候,打开控制台,切换移动端屏幕,这个时候会发现,页面不能铺满屏幕,我需要给最外侧div加样式width更换为min-width:100%;
再加一个position:absolute;即可生效

未解决前

PC端如下图

在这里插入图片描述

移动端如下图

通过按键盘键F12,查看移动端适配

在这里插入图片描述

未解决前样式

一定要修改最外层div的才能生效

<body>
	<div class="main">
	  <div class="box">
	  </div>
	</div>
</body>

<style>
.main {
  width: 100%;
  height: 58px;
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}
</style>

解决后

PC端如下图

在这里插入图片描述

移动端如下图

通过按键盘键F12,查看移动端适配

在这里插入图片描述

解决后样式

一定要修改最外层div的才能生效

<body>
	<div class="main">
	  <div class="box">
	  </div>
	</div>
</body>

<style>
.main {
  min-width: 100%;
  height: 58px;
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  position:absolute;
}
</style>