位置: IT常识 - 正文

H5移动端适配方案rem/vw(移动端h5页面适配)

编辑:rootadmin
H5移动端适配方案rem/vw

推荐整理分享H5移动端适配方案rem/vw(移动端h5页面适配),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:h5页面怎么适配各种机型,h5移动端适配方式有哪些,h5手机端适配,h5移动端适配方案,h5移动端兼容,h5移动端适配方案,h5移动端适配方法有哪些,h5移动端适配方式有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

在讲解适配方案之前,我们聊聊为什么要做适配?

因为视口、逻辑像素、分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一。

物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显示单元,所以分辨率越高,屏幕可展示的像素点越多,也就更清晰。

逻辑像素:也叫设备独立像素,可以认为是计算机坐标系统中的一个点,这一个点代表可以由程序使用的虚拟像素(css像素),然后由相关系统转换为物理像素。

设备像素比:简称dpr(Device pixel ratio),定义了物理像素和设备独立像素的对应关系,设备像素比 = 物理像素 / 逻辑像素。

在移动端布局的时候,经常会有移动端如何展示1px的问题?

一般设计稿都是以750px宽度为基准,当设计师给出1px的数据的时候,对于视觉视口宽度为375px的手机,dpr如果为2,逻辑像素应该是0.5px,但移动端css最低只支持显示1px大小,这时候边框宽度就会是设计稿而言就会略粗一点。

视口

通常与浏览器窗口相同,但不包括浏览器的UI、菜单栏。

文档的 Element.clientWidth 是指一个文档使用 CSS pixels 单位表示的内部宽度,包括其 padding(不包括 border、margin 或垂直滚动条)。这就是视口的宽度。-----《MND文档》

移动设备的视口的默认值为 980px。

对于各种不同形状,不同设备像素比移动设备,其浏览器的视口(窗口中显示网页信息的区域)不一定与渲染页面大小相同。

移动设备的视口的默认值为 980px,一般情况下都要比这些设备的屏幕尺寸要大。

为了让页面能够全部展示,这些浏览器在渲染时会对页面进行缩放。

比如在一个宽 375px 的移动设备显示一个视觉视口宽为 980px 的页面,移动设备浏览器会对这个页面进行缩放直至其视觉视口宽度为 375px(具体取决于浏览器实现)。

但直接缩放页面会导致页面字体变小,使得缩放后的页面显示效果都不会很理想。    在移动端,为了让页面展示更多的内容,视口有以下区分。

布局视口:移动设备视口的默认值是980px,比屏幕宽度大,目的是能够展示更多那些PC端的网页内容;

视觉视口:屏幕宽度;

理想视口:布局视口=视觉视口;

上文说到移动设备布局视口的默认值是980px,由于视觉视口只有屏幕宽度,比如375px,那么我们看到的页面就会有一定的缩放,这样的效果是不太好的。

那么如何创建一个理想视口,让移动端浏览器使用屏幕宽度作为视口替换默认的 980px 宽度视口呢?

我们可以在 HTML 的头部添加以下标签:

<meta name="viewport" content="width=device-width">

这里 width 属性指的是布局视口宽度,现在布局视口的宽度被设置为了设备的屏幕宽度,也就是布局视口=视觉视口。

即文档视口宽度大小与设备宽度大小 100% 对应(转换为 CSS 像素值相同),现在理想视口就实现了。

其他属性释义:

initial-scale(初始缩放比例)。

maximum-scale(最大缩放比例)。

minimum-scale(最小缩放比例)。

user-scalable(是否允许用户进行缩放操作)。

这些属性的默认值已经很好了,开发时可以忽略掉这些属性。       移动端适配方案

1、弹性盒模型布局。

2、流式布局(百分比布局)。

3、rem布局。

4、vw/vh。

5、响应式布局(媒体查询)。

常用适配方案

H5移动端适配方案rem/vw(移动端h5页面适配)

1、rem & vw。

2、rem & 媒体查询。

下面重点讲解常用适配方案。    rem适配

rem这个单位代表根元素(通常为 元素)的 font-size 大小。当用在根元素的 font-size 上面时,它代表了它的初始值。–《MDN》 原理与实现:

通俗来讲,rem是一个相对单位,根元素的font-size的大小为一个rem单位。

rem适配指的是,通过设置根元素的font-size的大小,后续子元素就可以使用rem为单位,实际CSS pixels 单位需要在这个基础上乘以根元素的font-size。

eg. 设置根元素font-size为16px,设置其中一个子元素宽度为20rem,那这个子元素实际的宽度为20*16px=320px    一般移动端设计稿会以750px为基准,但由于每个移动设备的宽度不同,我们需要去按照这个基准去按比例适配。

// 设计稿宽度const WIDTH = 750// 设计稿中某元素的宽度const uiWidth = 100px // 屏幕宽度与设计稿宽度比例const scale = document.documentElement.clientWidth / WIDTH// 屏幕中的实际宽度const realWidth = uiWidth * scale // 以375px屏幕宽为例// realWidth = 100 * (375/750)= 50px

按照这个思路,为了计算方便,我们可以使用rem来进行适配,将以上代码可以改写为:

// 根据屏幕宽度与设计稿宽度比例 设置rem单位长度const htmlFontSize = (document.documentElement.clientWidth / WIDTH ) * 100 + 'px'// (375/750)*100= 50px// 实际大小其实就是let realWidth = uiWidth * htmlFontSize / 100// 100*50/100 = 50px// 得出最终公式realWidth = uiWidth / 100 + 'rem'

最后,需要监听页面大小改变,rem适配配置就完成了。

function setRem() { const WIDTH = 750 // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改 const scale = document.documentElement.clientWidth / WIDTH; document.documentElement.style.fontSize = scale + 'px';}setRem();window.onresize = setRem;

优点:

兼容性高,可以通过动态设置根元素的font-size来适配不同的屏幕。

缺点:

1、需要使用js,更适用于手机端,在大屏设备(如ipad)上,元素的尺寸大,可展示的内容不足。

2、移动端1px问题需要另外处理。    针对大屏改进方案( flexible 方案)

动态设置 rem 实现在不同尺寸的设备上界面展示效果一致。

1、限制 rem 的最大值。 2、通过媒体查询限制内容最大宽度。

插件使用postcss-pxtorem。

1、下载postcss postcss-pxtorem;

npm install postcss postcss-pxtorem --save-dev

2、js动态设置;

<script> const baseSize = 37.5 //跟配置中rootValue的值是一致的 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于 375 宽的缩放比例,可根据自己需要修改。 const scale = document .documentElement.clientWidth / 375 // 设置页面根节点字体大小 最高为两倍图 即设计稿为750 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }</script>

3、写好index.css之后执行以下脚本,可以编译出一个已经进行rem转换的文件main-rem.css。

var fs = require ( 'fs' ) ;var postcss = require ( 'postcss' ) ;var pxtorem = require ( 'postcss-pxtorem' ) ;var css = fs.readFileSync( 'index.css' , 'utf8' ) ;var options = { rootValue : 37.5 , propList : [ '*' ] } ;var processedCss = postcss(pxtorem( options )).process( css ).css;fs.writeFile('main-rem.css', processedCss, function (err) { if (err) { throw err; } console.log('Rem file written.');});

效果:

/*index.css*/body { margin: 0; padding: 0;}#app { width: 375px; height: 200px; background-color: brown; color: #fff; font-size: 16px;}

vw适配(推荐)

原理与实现:

vw/vh是将屏幕直接分为100等份,1vw是1%的屏幕宽度,1vh是1%的屏幕高度。

优点:

比较方便,只需要css就可以实现适配。

缺点:

1、vw、vh都是固定的,无法改变,和rem适配一样,对于大屏幕而言展示的内容较少。

2、兼容性问题(ie11不支持,少数低版本手机不支持),但目前兼容性越来越好。

方案升级:vw+rem适配方案:

前文谈到,vw的缺点是无法改变,rem的缺点是需要使用js来设置,而且它们都有各自的优点,那么可以将这两者巧妙的结合来解决这个问题。

html { /*针对于750px的设计稿*/ font-size: calc(100*100vw/750)}div { /*100px*/ width: 1rem;}/*媒体查询:适配大屏幕*/@media screen and (min-width: 450px) { html { font-size: calc(50 * 100vw / 750); }}

流式布局

流式布局也就是百分比布局。

比较简单粗暴,由于参考对象是父元素,尤其是嵌套层级比较深的时候,计算百分比的时候有时会有些许误差。

width/height:参考父元素 margin/padding:参考父元素的width border-radius/background-size/tarnsform: 参考自身宽高

响应式布局

通过媒体查询@media来适配不同屏幕大小,具体可以参考MDN文档

// 用户设备的最小宽度为 680px @media (min-width: 680px), screen { … } // min-和max-可以测试一个在两个值之间的宽度 @media (min-width: 30em) and (max-width: 50em) { … }

总结

目前比较推荐的移动适配方案是rem&vw,rem&媒体查询等,了解其中的适配原理对于前端而言是非常重要。

虽然有很多插件可供使用,但是熟知其中奥秘也能给我们的工作带来很大的帮助。

本文链接地址:https://www.jiuchutong.com/zhishi/289800.html 转载请保留说明!

上一篇:Uni-app + Vue3 + TS +Vite 创建项目

下一篇:Realsense D455/435内参标定以及手眼标定

  • iphone13pro机身尺寸(苹果13pro机身长多少厘米)

    iphone13pro机身尺寸(苹果13pro机身长多少厘米)

  • 苹果13pro双击截屏怎么设置(苹果13pro双击截屏)

    苹果13pro双击截屏怎么设置(苹果13pro双击截屏)

  • 芒果tv怎么关闭自动续费安卓手机(芒果tv怎么关闭会员自动续费)

    芒果tv怎么关闭自动续费安卓手机(芒果tv怎么关闭会员自动续费)

  • oppo拨号图标怎么恢复到桌面(oppo手机拨号后的页面不见了怎么恢复)

    oppo拨号图标怎么恢复到桌面(oppo手机拨号后的页面不见了怎么恢复)

  • 小米9se可以人脸解锁吗(小米9se有人脸解锁吗)

    小米9se可以人脸解锁吗(小米9se有人脸解锁吗)

  • 4000mah电池够用多久(4000mah电池够用多久暖手宝)

    4000mah电池够用多久(4000mah电池够用多久暖手宝)

  • 三星s10为什么还卡顿(三星s10为什么还没上市)

    三星s10为什么还卡顿(三星s10为什么还没上市)

  • 用户正忙是什么原因(用户正忙?)

    用户正忙是什么原因(用户正忙?)

  • 美图秀秀可以ps图片吗(美图秀秀可以p数字吗)

    美图秀秀可以ps图片吗(美图秀秀可以p数字吗)

  • 手机黑屏怎么恢复正常(手机黑屏怎么恢复彩屏)

    手机黑屏怎么恢复正常(手机黑屏怎么恢复彩屏)

  • 阿里云是私有云还是公有云(阿里云是私有云还是混合云)

    阿里云是私有云还是公有云(阿里云是私有云还是混合云)

  • 屏幕花了是内屏坏了吗(屏幕花了是内屏还是外屏坏了)

    屏幕花了是内屏坏了吗(屏幕花了是内屏还是外屏坏了)

  • 手机屏幕边缘泛红(手机屏幕边缘泛黄的原因)

    手机屏幕边缘泛红(手机屏幕边缘泛黄的原因)

  • 计算机的主机一般包括(计算机主机一直在叫,开不了机)

    计算机的主机一般包括(计算机主机一直在叫,开不了机)

  • iphonexr为啥有点卡顿(苹果xr为什么有时候没有反应)

    iphonexr为啥有点卡顿(苹果xr为什么有时候没有反应)

  • oppoa9和a9x的手机壳可以共用吗?(oppoa9和a9x的手机壳可以共用吗)

    oppoa9和a9x的手机壳可以共用吗?(oppoa9和a9x的手机壳可以共用吗)

  • 红米mdt6是什么型号(红米MDT6是什么型号)

    红米mdt6是什么型号(红米MDT6是什么型号)

  • iphone11抗冻吗(iphone11怕冷吗)

    iphone11抗冻吗(iphone11怕冷吗)

  • 苹果怎么取消拍照声音(苹果怎么取消拍照锐化)

    苹果怎么取消拍照声音(苹果怎么取消拍照锐化)

  • 手机上显示圆圈怎么去掉(手机上显示圆圈少一点是什么标志)

    手机上显示圆圈怎么去掉(手机上显示圆圈少一点是什么标志)

  • 8p基带是什么(8p基带芯片在哪)

    8p基带是什么(8p基带芯片在哪)

  • 苹果8边框掉漆怎么处理(苹果8边框掉漆怎么修复)

    苹果8边框掉漆怎么处理(苹果8边框掉漆怎么修复)

  • vulkanruntimelibraries是啥(vulkanruntimelibraries哪里来的)

    vulkanruntimelibraries是啥(vulkanruntimelibraries哪里来的)

  • 芒果tv微信怎么转人工(芒果tv微信怎么给其他人登)

    芒果tv微信怎么转人工(芒果tv微信怎么给其他人登)

  • 快手个人主页在哪里(快手个人主页在线咨询)

    快手个人主页在哪里(快手个人主页在线咨询)

  • 钉钉视频怎么下载到手机(钉钉视频怎么下载到本地)

    钉钉视频怎么下载到手机(钉钉视频怎么下载到本地)

  • 怎样找回拉黑的电话号(怎样找回拉黑的电话号码)

    怎样找回拉黑的电话号(怎样找回拉黑的电话号码)

  • 魅族开机卡flyme转圈圈(魅族开机卡住)

    魅族开机卡flyme转圈圈(魅族开机卡住)

  • 在win7系统中,删除文件提示“该项目不存在”的问题怎么解决?(在win7系统中怎样为另外一块硬盘安装系统)

    在win7系统中,删除文件提示“该项目不存在”的问题怎么解决?(在win7系统中怎样为另外一块硬盘安装系统)

  • 【前端工程化】配置package.json中scripts命令脚本,新手必学(前端工程化的理解简书)

    【前端工程化】配置package.json中scripts命令脚本,新手必学(前端工程化的理解简书)

  • HTML网站导航栏的制作(htmlcss导航栏网页)

    HTML网站导航栏的制作(htmlcss导航栏网页)

  • 增值税专用发票电子发票可以抵扣吗
  • 其他权益工具投资借贷方向
  • 小规模结转成本的会计分录怎么写
  • 库存商品月末必须结转吗
  • 企业账户被冻结可以去开其他账户吗
  • 出口退税逾期申报,需申报出口货物收汇情况表
  • 企业现金类资产包括
  • 小规模出口企业增值税申报
  • 小规模纳税人可以开数电专票吗
  • 以固定资产换入原材料
  • 闲置土地归谁管理
  • 自然人能申请破产吗?
  • 企业注销要缴个税吗
  • 税收折旧率
  • 关联交易的解释
  • 企业税前扣除凭证包括以下哪些方面
  • 会计明细账簿包括哪些
  • 本金和利息分别出具借条
  • 期间费用燃油费计入哪个项目?
  • 个人社保缴费允许多少年
  • 发票代码会有一样的吗
  • 票据结算包括哪几项
  • 向承兑人提示付款
  • 1697508923
  • 1697509246
  • 出差人什么意思
  • 企业所得税汇算清缴操作流程
  • 超市一般纳税人账务处理
  • 销售送礼品
  • 将u盘格式化
  • 担保公司计提的费用
  • 年度企业所得税计算方法
  • 期货保证金的计算公式当日盈亏怎么算
  • 即期结售汇期限包括
  • 办理发票缴销需要提供的资料
  • 如何选购餐桌椅
  • uniapp页面loading
  • .exe是什么程序
  • 国内来料加工委托方需要报关吗
  • 若依框架前后端分离手机号登录
  • 什么是实际成本计价
  • 增值税多交可以退税吗
  • 外币借款费用
  • 劳务公司已开票,可款项未收到,税票多久有效
  • 增值税加计扣除最新政策
  • php while true
  • css基础入门
  • php数据表
  • 微软官方wintogo
  • 可供出售金融资产的会计处理
  • 列入固定资产的金额标准
  • 两个公司的钱转来转去
  • 不开增值税发票的销售收入报税的操作流程是?
  • 在其他地区设立分公司需要
  • sqlserver重复数据
  • 所得税申报表营业成本包括哪些
  • 往来账目
  • 预付调整到其他应付款
  • mysql读写分离实现原理
  • windows自带的
  • windows2008r2无线网卡不可用
  • win10重装系统后无线网卡不能用了
  • incorrect email format, please re-enter.
  • win7不能自动启动
  • 微软推出windows1
  • win8分屏功能怎么用
  • WIN10系统英文怎么改中文?
  • win10系统内置应用软件有哪些
  • Android游戏开发教程
  • opengl纹理叠加
  • cocos2dx 2.2.2
  • 根据当前目录下的文件
  • 网页设计中span
  • unity socket udp
  • javascript的prompt
  • unity3dextractor
  • javascript总结笔记
  • 河北省国家税务局电子税务局登录
  • 2020年个体税收政策
  • 海宁到许村公交车路线
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设