PC端-移动端自适应屏幕

最新推荐文章于 2024-06-03 20:21:49 发布
最新推荐文章于 2024-06-03 20:21:49 发布
阅读量1.6k 收藏 4
点赞数 2
文章标签： 前端 webview elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49554584/article/details/122051487
版权

根据宽度决定内容的行数，适应手机端和PC端，便于开发；

使用Table+iframe实现页面快速跳转。

效果图：移动端

Index.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../APP.css" />
		<title></title>
	</head>
	<body>
		<script>
			var isFHD = screen.width > 679 ? true : false;
			(function() {
				if (isFHD) {
					window.location = "Pc-Home.html";
				} else {
					window.location = "Phone-Home.html";
				}
			})()
		</script>
	</body>
</html>

Pc-Home.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../APP.css" />
		<title></title>
		<style type="text/css">
			li {
				background-color: #409E99;
			}

			p {
				padding: 20px;
				transform: scale(0.8);
				white-space: nowrap;
			}

			a {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="1" cellpadding="1" style="width: 100%;height: 100vh;">
			<thead>
				<tr>
					<th colspan="2" style="height: 10vh;background-color: #fff;">
						<div style="display: flex;justify-content: space-around;align-items: center;">
							<img src="../IMG/ACM.jpg" style="height: 10vh;">
							<p style="line-height: 10vh;">ACM社团报名系统</p>
						</div>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td style="width: 10%;text-align: center;height: 100%;background-color: aliceblue;">
						<ul style="overflow-y: scroll;height: 100%;">
							<a href="1.html" target="content">
								<li>
									<p>ACM社团</p>
								</li>
							</a>
							<a href="2.html" target="content">
								<li>
									<p>单人赛</p>
								</li>
							</a>
							<a href="1.html" target="content">
								<li>
									<p>团队赛</p>
								</li>
							</a>
							<a href="2.html" target="content">
								<li>
									<p>我的比赛</p>
								</li>
							</a>
							<a href="2.html" target="content">
								<li>
									<p>荣誉墙</p>
								</li>
							</a>
							<a href="2.html" target="content">
								<li>
									<p>退出登录</p>
								</li>
							</a>
						</ul>
					</td>
					<td style="width: 90%;background-color: blanchedalmond;">
						<iframe name="content" src="1.html"
							style="width: 100%;height: 100%;border: none;background-color: #ccc;"></iframe>
					</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2" style="height: 8.4vh;background-color: #fff;">
						<p>页脚</p>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

Phone-Home.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../APP.css" />
		<title></title>
		<style type="text/css">
			li {
				padding: 10px;
				background-color: #409E99;
			}

			p {
				white-space: nowrap;
			}

			a {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="1" cellpadding="1" style="width: 100%;height: 100vh;">
			<thead>
				<tr>
					<th colspan="2" style="height: 10vh;background-color: #fff;">
						<div style="display: flex;justify-content: space-around;">
							<img src="../IMG/ACM.jpg" style="height: 10vh;">
							<p style="line-height: 10vh;">ACM后台管理系统</p>
						</div>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td style="text-align: center;background-color: aliceblue;height: 1px;">
						<ul style="overflow-y: scroll;display: flex;justify-content: space-between;">
							<a href="1.html" target="content">
								<li>
									<p>ACM社团</p>
								</li>
							</a>
							<a href="2.html" target="content">
								<li>
									<p>荣誉墙</p>
								</li>
							</a>
							<a href="1.html" target="content">
								<li>
									<p>退出登录</p>
								</li>
							</a>
						</ul>
					</td>
				</tr>
				<tr>
					<td style="text-align: center;background-color: aliceblue;height: 1px;">
						<ul style="overflow-y: scroll;display: flex;justify-content: space-between;">
							<a href="1.html" target="content">
								<li>
									<p>单人赛</p>
								</li>
							</a>
							<a href="2.html" target="content">
								<li>
									<p>团队赛</p>
								</li>
							</a>
							<a href="1.html" target="content">
								<li>
									<p>我的比赛</p>
								</li>
							</a>
						</ul>
					</td>
				</tr>
				<tr>
					<td style="width: 100%;">
						<iframe name="content" src="1.html"
							style="width: 100%;height: 100%;border: none;background-color: #fff;"></iframe>
					</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2" style="height: 8.4vh;background-color: #fff;">
						<div style="display: flex;justify-content: center;align-items: center;">
							<img src="../IMG/WeYoung.png" style="height: 4vh;border-radius: 50%;">
							<p style="line-height: 10vh;">由WeYoung工作室提供技术支持</p>
						</div>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

2.html（主要内容页面）

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../APP.css" />
		<title></title>
		<style type="text/css">
			p {
				margin: 0.5%;
				padding: 0.5%;
				background-color: #f9f9f9;
			}

			p:nth-child(odd) {
				background-color: #f5f5f5;
			}

			@media screen and (min-width:0px) and (max-width:679px) {
				p {
					width: 98%;
					height: 20vh;
					word-break: break-all;
				}
			}

			@media screen and (min-width:680px) and (max-width:1280px) {
				p {
					width: 48%;
					height: 20vh;
					word-break: break-all;
				}
			}

			@media screen and (min-width:1281px) {
				p {
					width: 31.33%;
					height: 20vh;
					word-break: break-all;
				}
			}

			/*@media screen and (min-device-width:0px) and (max-device-width:679px) {
				p {
					width: 98%;
					height: 20vh;
					word-break: break-all;
				}
			}

			@media screen and (min-device-width:680px) and (max-device-width:1280px) {
				p {
					width: 48%;
					height: 20vh;
					word-break: break-all;
				}
			}

			@media screen and (min-device-width:1281px) {
				p {
					width: 31.33%;
					height: 20vh;
					word-break: break-all;
				}
			}*/

			#APP {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
			}
		</style>
	</head>
	<body>
		<div id="APP">
			<p>比赛名字：2016-12-12 16:00:00</p>
			<p>比赛名字：2016-12-12 16:00:00</p>
			<p>比赛名字：2016-12-12 16:00:00</p>
			<p>比赛名字：2016-12-12 16:00:00</p>
			<p>比赛名字：2016-12-12 16:00:00</p>
			<p>比赛名字：2016-12-12 16:00:00</p>
			<p>比赛名字：2016-12-12 16:00:00</p>
		</div>
	</body>
</html>

APP.js（全局js）

* {
	padding: 0;
	margin: 0;
	font-size: small;
}

::-webkit-scrollbar {
	width: 1px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255, 0, 0, 0.4);
}

a {
	text-decoration: none;
	text-align: center;
	color: black;
}

a:hover {
	color: #FFF;
	background-color: #FF0000;
}

a:focus {
	color: #fff;
}

li {
	list-style: none;
}

li:hover {
	background-color: #409E70;
	transition: all 500ms;
}

重工潇洒哥
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
PC端和移动端自适应问题的快速解决方法
09-24
如何解决PC端和移动端自适应问题？下面小编就为大家带来一篇PC端和移动端自适应问题的快速解决方法。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
PC、移动端自适应等比缩放布局方案
11-16
### PC、移动端自适应等比缩放布局方案 随着互联网技术的发展与用户需求的变化，前端开发中的布局方式也在不断地演变。从最开始的静态布局到流式布局、自适应布局、响应式布局以及弹性布局，每种布局都有其独特的...
如何解决PC端和移动端自适应问题？
github_36111469的博客
12-13 8402
如何解决PC端和移动端自适应问题？    做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用94
一篇文章搞懂！vue中pc端与移动端适配解决方案（亲测有效）
最新发布
djemx2025的博客
06-03 6214
当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。
一篇文章搞懂，vue中pc端与移动端适配解决方案（亲测有效）
Web面试那些事儿的博客
10-11 7230
当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。
PC端自适应
qq_52359462的博客
06-05 1049
pc端自适应 使用amfe-flexible 和 postcss-px2rem依赖包 步骤: 1.安装依赖包 npm install amfe-flexible -S npm install postcss-px2rem -S 2.在main.js中引入 import 'lib-flexible' 3.在vue.config.js中配置 remUnit是根据设计稿自定义的，用设计稿尺寸/10，例如你是在1920的设计稿上设计的 这里就写192 配置内容如下：放在module.exports={}里 cs
PHP视频网站，支持导入，PC端、移动端自适应
10-30
【PHP视频网站，支持导入，PC端、移动端自适应】是一个功能完善的在线视频分享平台，其核心在于使用PHP编程语言构建，旨在提供一个既可以适应个人电脑（PC）又能够兼容移动设备（如智能手机和平板电脑）的用户界面。...
基于vue项目下PC端和移动端实现的自适应.zip
10-21
本项目"基于vue项目下PC端和移动端实现的自适应"即展示了如何在Vue.js环境中实现跨平台的响应式设计。 首先，我们来看"adaptiveDifferentiation-master"这个项目名称，它暗示了主要关注的是适应性差异化，也就是...
页面自适应案例，适配pc端和移动端
11-15
在案例文件"mypage"中，可能包含HTML、CSS和JavaScript代码，展示了如何结合以上技术实现在PC端和移动端的自适应。通过分析和学习这个案例，你可以了解到如何构建一个真正跨设备兼容的网页，确保无论用户使用何种...
慈善活动援助项目网站模板-适配移动端&PC端-HTML网站源码.zip
04-01
它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对...
pc与移动端端适配网页模板
02-15
基于pc与移动端完美适配模板解决方案，对于前端新手来说稍加改动就可完成建站
pc端自适应
weixin_59916662的博客
11-12 234
pc端自适应
自适应pc端
m0_60053251的博客
03-08 82
<meta name="viewport" content="user-scalable=yes">
pc端自适应设置
weixin_57246351的博客
11-30 1142
第一步,引入vue文件中js代码 <script> // 单独设置jsrem适配文件 // 根标签文字大小 = 当前设备宽度 / 基数 function setFontSize () { // 确定基数 const i = 80 // 获取设备 const htmlClient = document.documentElement // 设备宽度 let htmlWidth = htmlClient.offsetWidth // 设备宽度不能无限的大不能无限小 (1
PC兼容、移动适配
@
08-09 639
1、PC兼容性： 代码兼容：IE7及以上，360浏览器，搜狗浏览器，谷歌，火狐，欧朋等。 （1）初始化css，保证消除不同浏览器的细微差别 （2）针对IE低版本浏览器及其他 （A）使用前缀；-ms -> IE、-moz -> Firefox、 -webkit -> Chorme|Safari （B）css hack （C）条件hack （3）其他 border（IE）.m...
pc端自适应屏幕
xiaoququ的博客
09-06 2439
媒体查询 默认设置body为粉色； 当屏幕宽度在480px到580px之间，body为绿色； 当屏幕宽度大于580px时，body显示为黄色； <style> body { background-color: pink; } @media screen and (min-width: 480px) { body { background-color: lightgreen; } } @media screen and (min-width: 580px) { bod
PC端自适应-rem
majingjing1314的博客
08-26 582
是指相对于根元素字体大小的单位，一个相对单位。rem可以做到随着根元素的字体大小随之变化，达到自适应屏幕的效果。设置这个值，谷歌浏览器不会受影响，当是IE浏览器等时，会受影响，根据实际去调整值。可以使用媒体监听，也可以使用动态js计算，本文因为不确定自适应数量使用动态计算。每个单位大小用实际值除以100得到相对的。代表宽度是设备宽度，同时不允许缩放。
带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看）
热门推荐
梁先森的博客
09-20 4万+
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！ 开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册） 好了，咱们开始吧！ 1、首先我先在电脑上打开网页 2、接下来使用chrome浏览器自带的手机模拟器看看这个网...
pc端和移动端自适应
10-14
PC端和移动端自适应是指网站或应用程序能够根据用户的设备和屏幕大小自动调整展示效果和布局。在现代互联网时代，用户的访问终端多种多样，包括桌面电脑、笔记本电脑、平板电脑和智能手机等。为了让用户在不同设备上...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值