h5移动端屏幕适配方案(rem、vw)

2024-05-04 20:58
文章标签 移动 方案 屏幕 h5 适配 rem vw

本文主要是介绍h5移动端屏幕适配方案(rem、vw),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、概述

移动端屏幕大小不一,要使网页能自适应不同尺寸的手机屏幕,而且还要尽可能开发便捷,目前使用最多的还是rem大法,相对比较成熟,而新兴的vw方案也可以一试。
本文主要介绍rem和vw两种方案的使用配置方式。

2、meta设置

首先移动端要设置好视口,使视口的宽度等于设备屏幕宽度,这样浏览器识别后就认为该网页是移动端网页,同时也就不再有点击300ms延迟的问题了:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">

3、rem方案

(1)原理

css中rem单位的计算是基于根字体大小,也就是html标签元素的font-size,未设置font-size时默认字体大小是16px,假设根字体大小就是16px,那比如2rem就等于2 * 16 = 32 px。
如果所有涉及尺寸的css单位都用rem来写,那实际尺寸就取决于根字体大小是多少了,那如果根据手机屏幕宽度和设计图宽度的比例去动态改变根字体大小,就能实现实际屏幕呈现出和设计图一致的效果。

(2)js基础封装:动态计算根字体大小

  • 首先需要定义下设计图尺寸(宽度)和基准值,基准值即1rem等于多少px,设计图尺寸也确定下来,就表示在该尺寸下根字体大小为该基准值。
  • 根据上述rem原理就能得出一个公式:实际屏幕宽度 / 设计图尺寸 = 实际根字体大小 / 基准值
  • 将上述公式调下顺序:要计算的根字体大小值 = 实际屏幕宽度 / 设计图尺寸 * 基准值
  • 示例代码:
var sizeUI = 375 // 定义设计图尺寸
var remBase = 37.5 // 定义基准值
var docEl = document.documentElement // 获取html元素setRemUnit() // 执行函数function setRemUnit () {var docFontSize = docEl.clientWidth / sizeUI * remBase // 计算得到根字体大小docEl.style.fontSize = docFontSize + 'px' // 设置根字体大小
}
  • 如上代码,设计图尺寸设为375是为了方便chrome调试,毕竟chrome调试下iphoneX默认宽度就是375,查看尺寸大小时方便,基准值设为37.5,这样也能适配vant UI;
  • 上述代码要在页面一打开时就加载,然后开发时写元素尺寸就按照375设计图下该元素的px尺寸除以基准值37.5得到的rem值。

(3)js封装优化:重置网页默认大小

  • css中字体样式是可以继承的,元素未设置font-size时字体大小是从父级元素继承,层层网上找,如果找到根元素(html)也没有设置font-size时就取默认字体大小,默认是16px。
  • 在用rem方案时会给根元素设置字体大小,这个值一般都很大,而给body元素设置下字体大小为16px就能实现重置的效果。
  • 只需要在上述封装的代码 setRemUnit 函数里末尾加一行:
document.querySelector('body').style.fontSize = 16 / docFontSize + 'rem'

(4)js封装优化:响应屏幕尺寸的变化

  • 监听到屏幕尺寸改变时重新设置根字体大小
  • 直接上代码:
window.addEventListener('resize', setRemUnit) // 触发示例:屏幕旋转
window.addEventListener('pageshow', function (e) { // 触发示例:有页面缓存功能的浏览器的前进后退if (e.persisted) setRemUnit()
})

(5)js封装优化:个别机型rem计算不准的兼容

  • rem方案确实存在个别机型的兼容性问题,常见于华为手机(大骂!!!),个别机型用rem计算出来的尺寸有偏差,导致页面两边留白或有横向滚动,还有些机型在改变手机系统默认字体大小时也会出现类似问题,这也是rem方案被人诟病的点,但其实这一点是可以做兼容处理的。
  • 原因:这种现象从网页里体现出的原因是根字体元素实际字体大小和设置的字体大小不一致,有几px的偏差。
  • 解决方法:根字体元素实际字体大小可以通过getComputedStyle获取到,然后和设置的字体大小进行比较,高了就让设置的字体大小加1,低了就减1,重复执行,直到两者差距值不超过1就认为差不多值合适了。
  • 代码:
var docEl = document.documentElementfunction handleRemAdapt () {var currentFontSize = parseInt(docEl.style.fontSize)var temp = currentFontSizefor (var i = 0; i < 100; i++) { // 只遍历100次,够用了var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize)var differ = realFontSize - currentFontSizeif (Math.abs(differ) >= 1) {if (differ > 0) {temp--} else {temp++}docEl.style.fontSize = temp + 'px'} else {break}}
}

(6)完整js封装及项目中引入

  • 完整js代码 flexible.js
;(function (window, document) {var sizeUI = 375 // 定义设计图尺寸var remBase = 37.5 // 定义基准值var docEl = document.documentElementvar bodyEl = document.querySelector('body')setRemUnit()window.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) setRemUnit()})function setRemUnit () {var docFontSize = docEl.clientWidth / sizeUI * remBasedocEl.style.fontSize = docFontSize + 'px'bodyEl.style.fontSize = 16 / docFontSize + 'rem'handleRemAdapt()}function handleRemAdapt () {var currentFontSize = parseInt(docEl.style.fontSize)var temp = currentFontSizefor (var i = 0; i < 100; i++) {var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize)var differ = realFontSize - currentFontSizeif (Math.abs(differ) >= 1) {if (differ > 0) {temp--} else {temp++}docEl.style.fontSize = temp + 'px'} else {break}}}
})(window, document)
  • 普通html页面中建议在head标签内引入该js:
<head><script src="./flexible.js"></script>
</head>
  • spa单页面项目中直接在项目入口文件里引入即可:
import './flexible.js'

(7)webpack中配置px自动转rem

对于webpack项目,利用插件可以做到webpack编译打包时自动将px单位转rem,这样开发时只需要写px不用再计算,非常方便。

  • 首先项目中需要先集成插件postcss,vue-cli和create-react-app创建的项目已默认集成可以忽略。
  • 然后再集成插件:postcss-plugin-px2rem 官方地址
  • 安装依赖
npm i postcss-plugin-px2rem -D
  • 然后在postcss配置文件(例如postcss.config.js)里进行配置:
module.exports = {plugins: {autoprefixer: {},'postcss-plugin-px2rem': {rootValue: 37.5, // 基准值,和flexible.js里的保持一致selectorBlackList: ['noRem'],minPixelValue: 2}}
}
  • 需要注意的是,这种方式只能转换样式文件里px单位,比如css、less、vue页面的style标签等,而dom结构里的行内样式(style属性)以及通过js代码动态设置的单位不会自动转换,仍然需要自己手动处理(将px单位处以37.5换算成rem单位即可)。

4、vw方案

如果rem方案使用的得心应手了,再看vw方案就很简单了,vw单位在移动端兼容性已经没问题了,其他方面还需要在项目中实践检验。

(1)原理

vw是视口单位,是视口宽度等分100份后所占的份数,1vw就相当于屏幕宽度的1%,所以使用vw单位在不同屏幕尺寸下能天然的自适应。

(2)使用

vw方案相比rem方案无需封装引入js文件,将设计图尺寸下的元素大小转换为vw就能直接使用,简单很多。

(3)webpack中配置px自动转vw

webpack项目中可以 利用插件进行自动转换,和上述px自动转rem类似。

  • 同样需要依赖postcss,脚手架创建的项目已默认集成postcss可以忽略此条。
  • 然后引入插件:postcss-px-to-viewport 官方地址
  • 安装依赖:
npm i -D postcss-px-to-viewport
  • 配置postcss.config.js:
module.exports = {plugins: {autoprefixer: {},'postcss-px-to-viewport': {viewportWidth: 375, // 设计图尺寸minPixelValue: 2}}
}
  • 同样的,只转换样式文件里的单位,行内样式里及js里的px单位不会自动转换,需手动处理。

这篇关于h5移动端屏幕适配方案(rem、vw)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/960066

相关文章

Java Response返回值的最佳处理方案

《JavaResponse返回值的最佳处理方案》在开发Web应用程序时,我们经常需要通过HTTP请求从服务器获取响应数据,这些数据可以是JSON、XML、甚至是文件,本篇文章将详细解析Java中处理... 目录摘要概述核心问题:关键技术点:源码解析示例 1:使用HttpURLConnection获取Resp

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.

SpringBoot首笔交易慢问题排查与优化方案

《SpringBoot首笔交易慢问题排查与优化方案》在我们的微服务项目中,遇到这样的问题:应用启动后,第一笔交易响应耗时高达4、5秒,而后续请求均能在毫秒级完成,这不仅触发监控告警,也极大影响了用户体... 目录问题背景排查步骤1. 日志分析2. 性能工具定位优化方案:提前预热各种资源1. Flowable

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

IDEA中Git版本回退的两种实现方案

《IDEA中Git版本回退的两种实现方案》作为开发者,代码版本回退是日常高频操作,IntelliJIDEA集成了强大的Git工具链,但面对reset和revert两种核心回退方案,许多开发者仍存在选择... 目录一、版本回退前置知识二、Reset方案:整体改写历史1、IDEA图形化操作(推荐)1.1、查看提

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕