移动端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 / 10console.log('htmlFontSize', htmlFontSize);// 将值给到html的font-sizehtmlEl.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.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (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 插件,在编写时自动转化:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux内核与基础命令学习总结

Linux操作系统 Linux操作系统博大精深,其中对线程,IO,文件系统等概念的实现都很有借鉴意义。 ​ 文件系统和VFS 文件系统的inode上面讲过了。VFS主要用于屏蔽底层的不同文件系统,比如接入网络中的nfs文件系统,亦或是w…

如何使用docker-compose安装数据可视化应用JSON Crack并实现远程访问

文章目录 1. 在Linux上使用Docker安装JSONCrack2. 安装Cpolar内网穿透工具3. 配置JSON Crack界面公网地址4. 远程访问 JSONCrack 界面5. 固定 JSONCrack公网地址 JSON Crack 是一款免费的开源数据可视化应用程序,能够将 JSON、YAML、XML、CSV 等数据格式可视化为交互…

SAP SD学习笔记08 - Pre-sales(售前)引合,見積的概念,数据流(完了规则和参照Status),Copy管理,VBKD表的明细

上一章讲了紧急发注,现金贩卖,贩卖传票,明细Category等知识。 SAP SD学习笔记07 - 紧急发注(急单),现金贩卖,贩卖传票Type/ 明细Category 及其Customize-CSDN博客 - 本张继续讲SAP SD模块的流程…

青铜器RDM研发管理平台 upload 任意文件上传漏洞复现

0x01 产品简介 青铜器RDM研发管理平台是集成产品管理、研发部门管理、研发项目管理、研发多项目管理、研发资源管理、研发绩效管理、研发工程管理的集中平台。 0x02 漏洞概述 青铜器RDM研发管理平台 upload 接口存在任意文件上传漏洞,未经身份验证的远程攻击者可通过该漏洞…

【板栗糖GIS】如何给微软拼音输入法加上小鹤双拼

【板栗糖GIS】如何给微软拼音输入法加上小鹤双拼 用过在注册表里新建的方法,结果弄完没有出现小鹤双拼方案,想到了自己写reg表 目录 1. 新建一个txt文件 2. 把.txt的后缀名改成.reg,双击运行 3. 在设置中找到微软输入法-常规 1. 新建一个…

微信预约怎么做_体验便捷的服务

在这个快节奏的时代,时间显得格外珍贵。无论是工作还是生活,我们都渴望能够用最短的时间完成更多的事情。在这样的背景下,微信预约应运而生,成为我们追求高效、便捷生活的新宠。今天,就让我们一起探讨微信预约的魅力&a…

Zabbix触发器函数(取前后差值last)

获取最新值last zabbix触发器方法last用于获取item最新值或者第几个值以及某个时间的哪一个值。 Last (most recent) T value is > N Last (most recent) T value is < N Last (most recent) T value is N Last (most recent) T value is NOT N触发器方法last - 语法 …

网络与 Internet因特网的基本概念

目录 网络Internet &#xff08;互联网或互连网&#xff09;Internet&#xff08;因特网&#xff09;待续、更新中 网络 指将分布在不同地理位置的、相同或不同类型的网络通过网络互连设备&#xff08;中继器、网桥、路由器或网关等&#xff09;相互连接&#xff0c;形成一个范…

相机系列——透视投影:针孔相机模型

作者&#xff1a;木一 引言 上文我们提到&#xff0c;三维相机是对真实世界成像的模拟&#xff0c;为了让三维物体在计算机屏幕上呈现出来的图像符合人眼观察效果&#xff0c;通常采用透视投影方式模拟相机成像&#xff0c;为了简化计算&#xff0c;可以用针孔相机模型来描述…

多线程(54)JMM中的内存屏障

Java内存模型&#xff08;JMM&#xff09;中的内存屏障是一种保证内存可见性、顺序性的底层机制。它们是一组指令&#xff0c;用于在多线程环境中确保内存操作的有序性和可见性。内存屏障主要分为四类&#xff1a;LoadLoad、StoreStore、LoadStore和StoreLoad。 内存屏障的类型…

麒麟服务器操作系统安装HTTP服务

往期好文&#xff1a;麒麟服务器操作系统安装TFTP服务 Hello&#xff0c;大家好啊&#xff01;今天我们将探讨如何在麒麟服务器操作系统上安装和配置HTTP服务&#xff0c;这是任何网络服务或应用的基础。无论你是想建立一个简单的网站&#xff0c;还是需要一个全功能的Web服务器…

CodeMirror使用: 编写一个在线编辑HTML、JS、CSS文件,网页的模板页面-初实现

前言&#xff1a;前几天编写一个UI模板控制的功能&#xff0c;根据上传的前端模板更换跳转入口主题页面&#xff1b;在编写的时候&#xff0c;突发奇想能不能在列表页面进行在线编辑刚刚上传的模板zip压缩包里的页面...于是经过学习研究有了这篇文章&#xff1b;当日记本一样记…

图灵《模仿游戏》论文学习

文章目录 1. 写在最前面2. 核心观点学习2.1 脑图观点记录2.2 经典观点记录 3. 感受4. 碎碎念5. 参考资料 1. 写在最前面 3 月看了一部以图灵为原型拍摄的人物传记类电影《模仿游戏》&#xff0c;里面反复提及到的论文《COMPUTING MACHINERY AND INTELLIGENCE》&#xff0c;引起…

计算机丢失VCRUNTIME140_1.dll处理办法

一、打开 下面连接地址&#xff0c;下载Visual Studio 2015, 2017, 2019, and 2022 https://learn.microsoft.com/en-US/cpp/windows/latest-supported-vc-redist?viewmsvc-170#visual-studio-2015-2017-2019-and-2022 二、下载系统对应的版本 32位系统下载X86 64位系统下载X…

MySQL:锁的分类

文章目录 行级锁Record LockGap LockNext-Key Lock插入意向锁 表级锁表锁元数据锁&#xff08;MDL&#xff09;意向锁AUTO-INC 锁 全局锁 行级锁 Record Lock 记录锁有S锁&#xff08;共享锁/读锁&#xff09;和X锁&#xff08;排他锁/写锁&#xff09;之分&#xff0c;加完S…

win10 鼠标箭头自己乱动解决方案

我这里只说我碰到的然后我的解决方案&#xff0c;不一定对其他问题有效&#xff1b; 1. 首先拔掉鼠标线查看鼠标箭头是否仍然在乱动&#xff0c;如果是则非鼠标问题&#xff0c;如果不再乱动则是鼠标的问题&#xff1b;验证非鼠标问题&#xff1b; 2. 因为鼠标乱动跟鼠标无关…

【深度学习】AI修图——DragGAN原理解析

1、前言 上一篇&#xff0c;我们讲述了StyleGAN2。这一篇&#xff0c;我们就来讲一个把StyleGAN2作为基底架构的DragGAN。DragGAN的作用主要是对图片进行编辑&#xff0c;说厉害点&#xff0c;可能和AI修图差不多。这篇论文比较新&#xff0c;发表自2023年 原论文&#xff1a…

Scala详解(1)

Scala 简介 概述 Scala是Martin Ordersky(马丁.奥德斯科/基)于2001年开始设计的一门支持面向对象(Object-oriented)和函数式编程(Functional Programming)的多范式语言 Scala的官网&#xff1a;www.scala-lang.org Scala目前为止有3个大版本&#xff1a;Scala1.X~3.X。目前…

Redisson实现分布式锁

Redisson实现分布式锁 一、分布式锁使用场景 随着互联网技术的不断发展&#xff0c;数据量的不断增加&#xff0c;业务逻辑日趋复杂&#xff0c;在这种背景下&#xff0c;传统的集中式系统已经无法满足我们的业务需求&#xff0c;分布式系统被应用在更多的场景&#xff0c;而…

韩顺平 | 零基础快速学Python(16) 文件处理

文件 输入与输出 输入&#xff1a;数据从数据源(文件)到程序(内存)&#xff1b; 输出&#xff1a;数据从程序(内存)到数据源(文件)。 #mermaid-svg-06PG6JZq4jJMV1oH {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-sv…