PC端-移动端自适应屏幕

根据宽度决定内容的行数，适应手机端和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;
}

PC端-移动端自适应屏幕相关推荐

计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle {margin: 50px auto 0;w ...
Vue pc端适配不同分辨率屏幕
前言 pc端一般是不需要适配的,因为现在的显示器分辨率一般都是1920*1080(设计图也是),一般不用管. 但是有一种情况你的设计图是1920*1080,开发完了.发现别人设备因为某些原因不是这个分 ...
html开发移动APP窗口大小自适应,移动端web开发，怎么自适应屏幕的大小
原标题:移动端web开发,怎么自适应屏幕的大小作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 在移动端 ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
前端分辨pc和移动端导入不同css
通过navigator获取浏览器,根据浏览器的不同判断出pc和移动端然后设置不同的css 分辨不同屏幕导入不同的css文件: function loadCSS() { if((navigator.us ...
[html] 移动端布局的自适应如何做？
[html] 移动端布局的自适应如何做? 移动端的布局,如果是采用框架的话,小程序和uni-app等都有响应式单位rpx来做自适应. 如果单纯的用Vue或React的话,一般来说就是flex配合rem ...
微信小程序是计算机软件吗,pc端移动端客户端微信小程序区别?
app是什么? app英文是application,翻译是,手机软件的应用程序. pc端是什么? PC是personal computer的缩写,意思就是是个人计算机,中文名叫电脑,英文名则是PC. ...
jsp页面适应手机屏幕_JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码...
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 var phoneWi ...

PC端-移动端自适应屏幕

PC端-移动端自适应屏幕相关推荐

最新文章

热门文章