移动端web适配方案

 

以下是移动端适配的多个方案,也可以说说你是怎么做的。

正文

  • 自适应:根据不同的设备屏幕大小来自动调整尺寸、大小

  • 响应式:会随着屏幕的实时变动而自动调整,是一种更强的自适应

为什么要做移动端适配?

目前市面上移动端屏幕尺寸非常的繁多,很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图:

  • 当我们针对一个手机进行布局设计时,设置了一个 200 * 200 大小的盒子

  • 但在不同的设备上,由于逻辑像素不同的问题,会使得这个盒子在更大的视口上显得很小,在更小的视口上显示很大

  • 因此我们需要进行适配让它在不同设备上所占据视口的空间比例是相同的

当前流行的几种适配方案

  • 方案一:百分比设置(不推荐)

    • 因为不同属性的百分比值,相对的可能是不同参照物,所以百分比往往很难统一

    • 所以百分比在移动端适配中使用是非常少的

  • 方案二:rem单位+动态html的font-size

  • 方案三:vw单位(推荐)

  • 方案四:flex的弹性布局

rem + 动态设置 font-size

rem 单位是相对于 html 元素的 font-size 来设置的,通过在不同屏幕尺寸下,动态的修改 html 元素的 font-size 以此来达到适配效果

在开发中,我们只需要考虑两个问题:

  • 针对不同的屏幕,设置 html 不同的 font-size

  • 将原来设置的尺寸,转化成 rem 单位

font-size 的尺寸

屏幕尺寸html的font-size盒子的设置宽度盒子的最终宽度
375px37.5px1rem37.5px
320px32px1rem32px
414px41.4px1rem41.4px

px 与 rem 的单位换算

  • 手动换算

    • 根元素 html 的文字大小 = 视口宽度/分成的份数(一般为10份,方便计算)

    • rem 值 = 元素的 px 值 / 根元素 html 的文字大小

    • 比如有一个在375px屏幕上,100px宽度和高度的盒子

    • 我们需要将100px转成对应的rem值

    • 100/37.5=2.6667,其他也是相同的方法计算即可

  • less/scss函数

.pxToRem(@px) {
  result: 1rem * (@px / 37.5);
}

.box {
  width: .pxToRem(100)[result];
  height: .pxToRem(100)[result];
  background-color: orange;
}

p {
  font-size: .pxToRem(14)[result];
}
  • postcss-pxtorem

    • 目前在前端的工程化开发中,我们可以借助于webpack的工具来完成自动的转化

    • npm install postcss-pxtorem

  • VSCode插件

方案一:媒体查询

思路:通过媒体查询来设置不同尺寸屏幕下 html 的 font-size

缺点:

  • 需要针对不同的屏幕编写大量的媒体查询

  • 如果动态改变尺寸,不会实时更新,只是一个个区间

@media screen and (min-width: 320px) {
   html {
     font-size: 20px;
   }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 24px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 28px;
  }
}

@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}

.box {
  width: 5rem;
  height: 5rem;
  background-color: blue;
}
 

 方案二:编写 js 代码

思路:通过监听屏幕尺寸的变化来动态修改 html 元素的 font-size 大小

方法:

  • 根据 html 的宽度计算出 font-size 的大小,并设置到 html 上

  • 监听页面尺寸的变化,实时修改 font-size 大小

function setRemUnit() {
  // 获取所有的 html 元素
  const htmlEl = document.documentElement
  // 375 -> 16px
  // 320px -> 12px
  // 我们需要动态更改字体大小,因此需要获取网页的宽度
  // 拿到客户端宽度
  const htmlWidth = htmlEl.clientWidth
  // 将宽度分成10份
  const htmlFontSize = htmlWidth / 10
  console.log('htmlFontSize', htmlFontSize);
  // 将值给到html的font-size
  htmlEl.style.fontSize = htmlFontSize + 'px'
}

setRemUnit()
// 给 window 添加监听事件
window.addEventListener('resize', setRemUnit) 

方案三:lib-flexible 库 

 lib-flexible 是淘宝团队出品的一个移动端自适应解决方案,通过动态计算 viewport 设置 font-size 实现不同屏幕宽度下的 UI 自适应缩放。

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document)) 

vw 适配方案 

100vw 相当于整个视口的宽度 innerWidth,1vw 相当于视口宽度的 1%,将 px 转换为 vw 即可完成适配,其实上面的 rem 就是模仿 vw 方案

vw相比于rem的优势:

  • 不需要去计算 html 的 font-size 大小,也不需要去给 html 设置 font-size

  • 不会因为设置 html 的 font-size 大小,而必须再给 body 设置一个 font-size 防止继承

  • 因为不依赖 font-size 的尺寸,所以不用担心某些原因的 html 的 font-size 尺寸被篡改,导致页面尺寸混乱

  • vw 更加语义话,1vw 相当于 1/100 viewport 的大小

  • rem 事实上作为一种过渡的方案,它利用的也是 vw 的思想

px 与 vw 的单位转换 

手动换算

比如屏幕尺寸为 375px,元素大小为 150px,我们需要将 150px 转换成对应的 vw 值:150 / 3.75=40

less/scss 函数

@vwUnit: 3.75;
.pxToVw(@px) {
  result: (@px / @vw) * 1vw
}
.box {
  width: .pxToVw(100)[result];
  height: .pxToVw(100)[result];
} 

postcss-px-to-viewport-8-plugin

  • 和rem一样,在前端的工程化开发中,我们可以借助于webpack的工具来完成自动的转化

  • npm install postcss-px-to-viewport-8-plugin

vs Code 插件

px to vw 插件,在编写时自动转化:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/547224.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【深度剖析】曾经让人无法理解的事件循环,前端学习路线

先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞…

Redis入门到通关之ZSet命令

文章目录 ⛄概述⛄常见命令有⛄RedisTemplate API❄️❄️ 向集合中插入元素,并设置分数❄️❄️向集合中插入多个元素,并设置分数❄️❄️按照排名先后(从小到大)打印指定区间内的元素, -1为打印全部❄️❄️获得指定元素的分数❄️❄️返回集合内的成员个数❄️❄…

最优算法100例之49-链表环-计算环的长度

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 定义两个指针,一个指针走两步,一个指针走一步,第一次相遇时开始计数,第二次相遇时停止计数,最后计数器的值就是环的长度…

STM32H7上实现AD5758驱动

目录 概述 1 下载ADI 5758 Demo 2 AD5758驱动的移植 2.1 使用STM32CubeMX创建工程 2.2 接口函数实现 2.2.1 驱动接口列表 2.2.2 函数实现 2.2.3 修正ad5758驱动 3 AD5758应用程序 3.1 编写测试程序 3.1.1 配置参数结构 3.1.2 配置参数函数 3.1.3 读取参数函数 3.…

【max材质addtive叠加模式特效渲染不出通道的解决办法】

max材质addtive叠加模式特效渲染不出通道的解决办法 2021-12-22 18:15 max的scanline扫描线,vray渲染可以,红移不行(只支持它自己的材质,它自己的材质没有additive模式)。据说mr是可以的。 右侧的球体使用附加不透明度。 附加不透明度通过将…

CentOS:执行make命令时报错g++: Command not found

报错截图: 其实很简单只需要安装一下 yum -y install gcc automake autoconf libtool make yum install gcc gcc-c

​LeetCode解法汇总2924. 找到冠军 II

目录链接: 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目: https://github.com/September26/java-algorithms 原题链接:. - 力扣(LeetCode) 描述: 一场比赛中共有 n 支队伍,按从…

J垃圾回收

J垃圾回收 1 概述2 方法区的回收3 如何判断对象可以回收3.1 引用计数法3.2 可达性分析法 4 常见的引用对象4.1 软引用4.2 弱引用4.3 虚引用4.4 终结器引用 5 垃圾回收算法5.1 垃圾回收算法的历史和分类5.2 垃圾回收算法的评价标准5.3 标记清除算法5.4 复制算法5.5 标记整理算法…

【深入理解】width 的默认值,2024年最新面试复盘

先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞…

如何使用pytorch进行图像分类

如何使用pytorch进行图像分类https://featurize.cn/notebooks/5a36fa40-490e-4664-bf98-aa5ad7b2fc2f

实时传输,弹性优先——物联网通讯打造数据上传新标杆

随着信息技术的飞速发展,物联网技术已经成为连接物理世界和数字世界的桥梁。在物联网领域,数据上传的速度、稳定性和灵活性是评价通讯技术优劣的重要指标。近年来,物联网通讯在实时传输、弹性优先方面取得了显著进展,为数据上传树…

224 基于matlab的优化工具箱优化函数

基于matlab的优化工具箱优化函数, 此工具箱中提供的算法包括: 灰狼优化器(GWO),蚂蚁狮子优化器(ALO),多功能优化器(MVO),蜻蜓算法(DA&…

4.15 网络编程

思维导图 #include <stdio.h> #include <string.h> #include <unistd.h> #include <stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <pthread.h> #include <semaphore.h> #inclu…

定时器、PWM定时器、UART串口通信

我要成为嵌入式高手之4月15日ARM第八天&#xff01;&#xff01; ———————————————————————————— 定时器 S3C2440A 有 5 个 16 位定时器。其中定时器 0、1、2 和 3 具有脉宽调制&#xff08;PWM&#xff09;功能。定时器 4 是一个无 输出引脚的内部…

【无标题】系统思考—智慧共赢座谈会

第432期JSTO—“智慧共赢座谈会”精彩回顾 我们身处一个快速变化的世界&#xff0c;其中培训和咨询行业也不断面临新的挑战和机遇。为了紧跟这些变革&#xff0c;我们邀请了行业专家与合作伙伴深入探讨在培训、交付和销售过程中遇到的难题。 本次座谈会的亮点之一是我们科学上…

rhce day1

一 . 在系统中设定延迟任务要求如下 在系统中建立 easylee 用户&#xff0c;设定其密码为 easylee 延迟任务由 root 用户建立 要求在 5 小时后备份系统中的用户信息文件到 /backup 中 确保延迟任务是使用非交互模式建立 确保系统中只有 root 用户和 easylee 用户可以执行延…

LeetCode 热题 100 Day02

滑动窗口模块 滑动窗口类问题&#xff1a;总能找到一个窗口&#xff0c;从前往后移动来查找结果值。 这个窗口的大小可能是固定的&#xff0c;也可能是变化的。但窗口的大小一定是有限的。 https://www.cnblogs.com/huansky/p/13488234.html Leetcode 3. 无重复字符的最长子串 …

什么是分组分析法

调查数据显示&#xff0c;2019 年年末中国大陆总人口 140005 万人。从年龄构成看&#xff0c;16 至 59 周岁年末人数为 89640 万&#xff0c;占总人口的比重为 64.0%&#xff1b;60 周岁及以上人口 25388 万人&#xff0c;占总人口的 18.1%&#xff0c;其中 65 周岁及以上人口 …

leetcode-链表中间节点

876. 链表的中间结点 题目 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间…

【办公类-21-16】 20240410三级育婴师 344多选题(题目与答案合并word)

作品展示 背景需求&#xff1a; 前文将APP题库里的育婴师题目下载到EXCEL&#xff0c;并进行手动整理【办公类-21-14】 20240406三级育婴师 344道多选题 UIBOT下载整理-CSDN博客文章浏览阅读287次&#xff0c;点赞8次&#xff0c;收藏9次。【办公类-21-14】 20240406三级育婴师…