H5 移动端适配
前言
移动端的适配是前端开发者必须考虑的一个问题,适配问题也是响应式问题,那么如何开发一个响应式的H5移动端应用?即在不同的设备下元素大小与间距会有不同的变化。今天就给大家分享这个问题。
一、案例说明
蘑菇街:
看一下蘑菇街网站是如何做适配的。下面分别截图了屏幕宽为375(iPhone6/7/8)和414(iPhone6p/7p/8p)的适配情况。
二、移动端适配的两大要素
-
rem单位
默认字号:
rem 单位是相对于根节点 html 字体大小的相对单位。谷歌浏览器默认字体大小为16px,即1rem = 16px;2rem = 32px。当然也可以自己设置 html 的字体大小。比如设置了 20px。html:{font-size:20px}
,那么1rem = 20px;2rem = 40px。最小字号:
那么能否设置为10px,这样 rem 与 px 就呈现 10 倍关系,也比较好计算?答案是不行。因为谷歌浏览器有最小单位字体为12px,所以即使设置了10px,也是按照12px计算。有些项目为了计算方便,会直接将 html 字体设置为 100px;那么1rem = 100px,2rem = 200px;呈现100倍的关系。基准字号:
以 iphone6/7/8 (也就是物理像素为750,逻辑像素为375)的屏幕为基准。那么物理像素750,整个屏幕的宽度就是750,缩小100倍就是7.5rem。375/7.5=50px,即 html 字号为50px。但是仅设置成50px就够了吗?这样在大屏幕上字体还是很小。所以需要用到动态计算。 -
动态计算
动态计算就是在不同的屏幕下 html 的字号也不相同。
动态计算如下所示:
<script>
var windowWidth=document.documentElement.getBoundingClientRect().width;
windowWidth=windowWidth>770?375:windowWidth;
var fontSize=windowWidth/7.5;
document.documentElement.style.fontSize= fontSize+ 'px';
</script>
html 字号等于屏幕宽度/7.5,当屏幕宽度大于 770 时,也就是超过 ipad 宽度时,则显示为 375 的屏宽效果。
- 实现思路
首先 rem 单位决定了整个页面的相对布局;其次通过动态设置 html 根元素 font-size属性,使得页面整体布局随屏幕变化而变化。
三、使用示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
<title>React App</title>
</head>
<style>
#root{
width:1rem;
height:1rem;
background:pink;
font-size: 0.22rem;
}
</style>
<body>
<div id="root">
我会随屏幕宽度的变化而变化
</div>
</body>
<script>
var windowWidth=document.documentElement.getBoundingClientRect().width;
windowWidth=windowWidth>770?375:windowWidth;
var fontSize=windowWidth/7.5;
document.documentElement.style.fontSize= fontSize+ 'px';
</html>
屏幕宽度为 iphone6/7/8(375像素)的效果。宽高为375/7.5 = 50.025px。
屏幕宽度为 iphone6/7/8 plus(414像素)的效果。宽高为414/7.5 = 55.2px。