H5页面自适应各种手机端屏幕分辨率的大小

之前写h5注册页的时候，总是适配不好，用过媒体查询，但是效果不太好，而且要适配的尺寸太多了，总归有遗漏的，时长达不到ui设计图的标准，后来在网上找了一篇适配的js代码，但是因为不太明白，所以使用的也不好哈哈，现在算是明白了点，故将代码放上原文出处：https://www.jianshu.com/p/26ce1458df65

         ; (function (designWidth, maxWidth) {var doc = document,win = window,docEl = doc.documentElement,remStyle = document.createElement("style"),tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;maxWidth = maxWidth || 540;width > maxWidth && (width = maxWidth);var rem = width * 100 / designWidth;remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';}if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(remStyle);} else {var wrap = doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);wrap = null;}//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；refreshRem();win.addEventListener("resize", function () {clearTimeout(tid); //防止执行两次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function (e) {if (e.persisted) { // 浏览器后退的时候重新计算clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function (e) {doc.body.style.fontSize = "16px";}, false);}})(1080, 1920);

最后有两个参数是需要手动调整的，分别是设计稿的宽度和最大宽度，我这里设计稿的宽度是1080，然后给他设定的最大宽度是1920，设定好之后就可以随心所欲地使用rem了哈哈

比如说量的尺寸是距离顶部882px，我们可以这样写top:8.82rem，原尺寸除以100就可以了，这段代码要放在头部script标签的最前面

H5页面自适应各种手机端屏幕分辨率的大小相关推荐

app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
PHP响应式H5图片网盘外链系统源码自适应PC手机端
介绍: PHP响应式H5图片网盘外链系统源码自适应PC手机端支持图片违规检测网盘与外链分享步伐,撑持一切格局文件的上传,可以天生文件外链.图片外链.音乐视频外链,天生外链同时主动天生响应的UBB ...
移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
wordpress海报轮播插件Smart Slider3 多端自适应--解决手机端海报细长问题
网上找了一下发现目前没人提到这个问题,不清楚是用的人少,或者是分享的人少,还是我比较笨,大家都知道怎么解决这个问题...不管了,我就打算把自己探索的过程,解决的方法记录下来,希望能帮助到跟我一样遇到类 ...
PHP绿茶小说站群网站源码自适应pc+手机端
介绍: PHP绿茶小说站群网站源码自适应电脑+手机端+秒收隔天速出权重绿茶小说站群2.x-秒收隔天速出权重-小说流量稳定收割机-精品轻量级PHP站群系统站群系统,小说行业专用引流精品站群,绿茶小说 ...
PHP绿茶小说站群网站源码自适应电脑+手机端
介绍: PHP绿茶小说站群网站源码自适应电脑+手机端+秒收隔天速出权重绿茶小说站群2.x-秒收隔天速出权重-小说流量稳定收割机-精品轻量级PHP站群系统站群系统,小说行业专用引流精品站群,绿茶小说 ...
修复版ZFAKA发卡系统源码自适应PC+手机端
介绍: 2021年12月修复版ZFAKA系统源码自适应PC+手机端带视频搭建教程主要修复了接口问题测试环境:Linux环境:Nginx 1.20.1-MySQL 5.6.50-PHP-7.1 ...
最新基于ThinkPHP5.0+BootStrap框架开发的自适应WAP手机端响应式界面博客系统PHP源码
<h2>源码介绍</h2> 分享一款基于ThinkPHP5.0框架开发的自适应WAP手机端响应式界面博客系统PHP源码,前端界面采用BootStrap框架设计,使得博客系统界面 ...
js简单判断页面是否为手机端访问
js判断页面是否为手机端访问 var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIpho ...

H5页面自适应各种手机端屏幕分辨率的大小

H5页面自适应各种手机端屏幕分辨率的大小相关推荐

最新文章

热门文章