H5需要的技术
-
页面素材预加载技术：可以选择 createJS 之中的 preloadJS 实现
-
音乐加载播放技术：可以选择 createJS 的 soundJS 实现
-
可以滑动的页面：可以选择 swiper.js 实现
-
可以涂抹擦除：可以选择 HTML5 中的 canvas 实现
-
有动态的文字和图片：可以选择使用 CSS3 实现，当然直接通过 JS 也可以
-
可以支持分享自定义的文案和图片：这里用到的是微信的 jssdk
移动端适配原理
- 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小
- 响应式：会随着屏幕的实时变动而自动调整，是一种自适应
rem单位+动态html的font-size
/*
* 方案1:媒体查询
*：缺点；需要针对不同的屏幕编写大量的媒体查询，且如果动态的修改尺寸，不会实时的进行更新
*/
<style>
@media screen and (min-width:320px){
html {
font-size:20px
}
}
@media screen and (min-width:375px){
html {
font-size:24px
}
}
.box {
width:5rem;
height:5rem;
}
</style>
<body>
<div class="box"></div>
</body>
/*
* 方案2:编写JS动态设置font-size
*/
<script>
const htmlEl = document.documentElement;
function setRem(){
const htmlWidth = htmlEl.clientWidth;
const htmlFontSize = htmlWidth / 10
htmlEl.style.fontSize = htmlFontSize + "px"
}
setRem();
window.addEventListener("resize",setRem)
</script>
<style>
.box {
width:5rem;
height:5rem;
}
</style>
<body>
<div class="box"></div>
</body>
vw+vh
- layout viewport:布局视口，即网页布局的区域，html元素的父容器。
- visual viewport:视觉视口，显示在屏幕上的网页区域
- ideal viewport:理想视口， 解决方法：
- 利用meta标签对viewport进行控制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
/*
* initial-scal:允许用户的最小缩放量
* minimum-scal:允许用户的最大缩放量
* maximum-scal:设置layout viewport的高度
* user-scalable:是否允许用户进行缩放，值为"no"或“yes”
*/
