前端开发者| 前端开发的小游戏 |
| 前端 游戏开发 |
| html5游戏前端开发 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta
content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;”
name=”viewport”
/>
<meta content=”telephone=no” name=”format-detection” />
<meta name=”format-detection” content=”email=no” />
<meta http-equiv=”Cache-Control” content=”no-cache” />
<title>响应式布局</title>
<style>
html {
font-size: 20px;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
header,
footer {
width: 100%;
background: #17a578;
color: #fff;
font-size: 1rem;
text-align: center;
line-height: 2rem;
}
.footer {
position: fixed;
bottom: 0;
}
.box {
}
.public {
width: 5rem;
height: 5rem;
font-size: 1.2rem;
display: inline-block;
text-align: center;
color: #fff;
line-height: 5rem;
margin-top: 1rem;
}
.left {
background: #f00;
}
.center {
background: #048f74;
}
.right {
background: #000;
}
</style>
</head>
<body>
<header>页面头部</header>
<div class=”box”>
<div class=”public left”>左</div>
<div class=”public center”>中</div>
<div class=”public right”>右</div>
<div class=”public left”>左</div>
<div class=”public center”>中</div>
<div class=”public right”>右</div>
</div>
<footer class=”footer”>页面底部</footer>
<script>
//orientationchange方向改变事件
;(function(doc, win) {
var docEl = doc.documentElement, //根元素html
//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
resizeEvt =
‘orientationchange’ in window
? ‘orientationchange’
: ‘resize’,
recalc = function() {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
//把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px’
}
//alert(docEl)
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false) //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
doc.addEventListener(‘DOMContentLoaded’, recalc, false) //绑定浏览器缩放与加载时间
})(document, window)
//alert(document.documentElement.clientWidth/320)
</script>
</body>
</html>
| 前端开发游戏 |
| 游戏后端开发和游戏前端开发对比 |
| 前端的游戏开发引擎 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册