H5 移动端适配

最新推荐文章于 2024-05-06 19:42:56 发布

杏子姐_1024

最新推荐文章于 2024-05-06 19:42:56 发布

阅读量2.1k

点赞数 2

分类专栏： # JavaScript 应用

本文链接：https://blog.csdn.net/weixin_44135121/article/details/100915166

版权

JavaScript 应用专栏收录该内容

21 篇文章 2 订阅

订阅专栏

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。

杏子姐_1024

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
H5 移动端适配

H5移动端适配前言一、案例说明二、移动端适配的两大要素三、完整代码前言移动端的适配是前端开发者必须考虑的一个问题，适配问题也是响应式问题，那么如何开发一个响应式的H5移动端应用？即在不同的设备下元素大小与间距会有不同的变化。今天就给大家分享这个问题。一、案例说明蘑菇街看一下蘑菇街网站是如何做适配的。下面分别截图了屏幕宽为375（iPhone6/7/8）和414（iPhone6p/7p...
复制链接

扫一扫

专栏目录