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进行文件格式校验的方案详解

《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实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数,你可以定义好线程数规则,生成线程数去跑代码说明:1.虚拟线程池:使用 Executors.newVir

MySQL中闪回功能的方案讨论及实现

《MySQL中闪回功能的方案讨论及实现》Oracle有一个闪回(flashback)功能,能够用户恢复误操作的数据,这篇文章主要来和大家讨论一下MySQL中支持闪回功能的方案,有需要的可以了解下... 目录1、 闪回的目标2、 无米无炊一3、 无米无炊二4、 演示5、小结oracle有一个闪回(flashb

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D