rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题

实例代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>废土坱行</title><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">* {margin: 0;padding: 0;}.downloadBtn {width: 12rem;height: 3.6rem;background: red;position: absolute;left: 50%;top: 29.6rem;margin-left: -6rem;font-size: 1rem;}</style>
</head>
<body><div class="content"><img class="contentImg" id="contentImg" src="./images/content.png"/><button class="downloadBtn">立即下载</button></div><script>function initWidth() {document.getElementById("contentImg").style.width = document.documentElement.clientWidth + 'px'}function initFontSize() {const cw = document.documentElement.clientWidth// width: 375px -> fontSize:16pxif (cw == 375) {document.documentElement.style.fontSize = '16px'} else {document.documentElement.style.fontSize = cw / 375 * 16 + 'px'}}initWidth()initFontSize()window.onresize = () => {initWidth()initFontSize()}</script>
</body>
</html>

思路简介：

1、首先，界面布局的尺寸采用rem单位。

2、然后，通过设置根节点（html）的 font-size 的 px 值来影响 rem 的实际大小。

3、最后，通过 js 来实时控制font-size 的大小，等比例变换即可。

效果演示：

标准尺寸下（iphone6）：

其它设备上（比如iphone5）：

注：可以看到我这个“立即下载”的按钮位置基本上是可以和img对上的。

rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题相关推荐

html兼容不同屏幕代码,rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题...
实例代码: 废土坱行 * { margin: 0; padding: 0; } .downloadBtn { width: 12rem; height: 3.6rem; background: red ...
Vue自定义指令—— 完美解决H5页面不同尺寸屏幕的适配问题
H5适配一直是一个头疼的问题,基于vue框架针对H5在不同分辨率的手机做出来一套适配方案,具体如下: 设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的: width:750px , hei ...
Vue自定义指令—解决H5页面不同尺寸屏幕的适配问题
基于vue框架针对H5在不同分辨率的手机做出来一套适配方案,具体如下: 设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的: width:750px , height:1108px(可使用该方 ...
移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
html网页在不同尺寸屏幕大小,移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
移动端h5页面不同尺寸屏幕适配兼容方法
最近刚开始做移动端页面,遇到了不少bug,说一下解决移动端不同屏幕页面的适应问题. 1. viewport属性及html页面结构 <meta name="viewport" ...
ios html5上架,IOS免签封装，完美解决H5应用上架App Store受阻的尴尬
通过H5封装成IOS的应用在初期的确受到了广大开发者们的追捧,因为只需要有H5网站就可以通过WEBAPP框架在几分钟内生成一个IOS的APP应用,几乎不需要什么成本.而对于普通玩家来说,在一些专业IO ...
一种解决h5页面背景音乐不能自动播放的方案
一种解决h5页面背景音乐不能自动播放的方案场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性现象: 1.大部分IOS系统和少部分Android微信不支持自动播放解 ...
移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...

rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题

实例代码：

思路简介：

效果演示：

rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题相关推荐

最新文章

热门文章