H5 移动端适配

前言

移动端的适配是前端开发者必须考虑的一个问题,适配问题也是响应式问题,那么如何开发一个响应式的H5移动端应用?即在不同的设备下元素大小与间距会有不同的变化。今天就给大家分享这个问题。

一、案例说明

蘑菇街:

看一下蘑菇街网站是如何做适配的。下面分别截图了屏幕宽为375(iPhone6/7/8)和414(iPhone6p/7p/8p)的适配情况。
H5 移动端适配_第1张图片

H5 移动端适配_第2张图片

二、移动端适配的两大要素

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 = 100px2rem = 200px;呈现100倍的关系。

基准字号:

以 iphone6/7/8 (也就是物理像素为750,逻辑像素为375)的屏幕为基准。那么物理像素750,整个屏幕的宽度就是750,缩小100倍就是7.5rem。375/7.5=50px,即 html 字号为50px。但是仅设置成50px就够了吗?这样在大屏幕上字体还是很小。所以需要用到动态计算。

动态计算

动态计算就是在不同的屏幕下 html 的字号也不相同。

动态计算如下所示:

  

html 字号等于屏幕宽度/7.5,当屏幕宽度大于 770 时,也就是超过 ipad 宽度时,则显示为 375 的屏宽效果。

实现思路

首先 rem 单位决定了整个页面的相对布局;其次通过动态设置 html 根元素 font-size属性,使得页面整体布局随屏幕变化而变化。

三、使用示范



  
    
    
    React App
  
  	
  
    
我会随屏幕宽度的变化而变化

你可能感兴趣的:(移动端,移动端适配,兼容,H5,移动端适配,前端)