自适应设备屏幕布局

谁借莪１个温暖的怀抱￠ 2022-07-14 11:11 269阅读 0赞

//在不同设备大小下，只要更改html的font-size值即可
            (function(win) { 
                var doc = win.document;
                var docEl = doc.documentElement;
                //以上两行代码获取页面的html,和document.querySelector('html') 结果一样
                var tid;
    
                function refreshRem() { 
                    //当前window视口的宽度
                    var width = docEl.getBoundingClientRect().width;
                    if (width > 640) { // 最大宽度
                        width = 640;
                    }
                    var rem = width / 20; // 将屏幕宽度分成20份， 每份为1rem
                    //为html设置font-size值
                    docEl.style.fontSize = rem + 'px';
                }
                //window 的视口改变时，触发resize事件
                win.addEventListener('resize', function() { 
                    //清除上一次html 中font-size 值 ，即rem值
                    clearTimeout(tid);
                    //设置设备切换后 html中font-size值
                    tid = setTimeout(refreshRem, 300);
                }, false);
                //pageshow每次加载页面时被触发，onload是第一次加载页面时，被触发
                win.addEventListener('pageshow', function(e) { 
                    //e.persisted=true 如果页面是从缓存中获取
                    if (e.persisted) {
                        clearTimeout(tid);//在一次刷新rem值，
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);
                //页面刚打开时，求rem值
                refreshRem();
    
            })(window);

发表评论取消回复

表情：

评论列表（有 0 条评论，269人围观）

还没有评论，来说两句吧...

相关阅读

相关自适应布局

常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应左侧固定，右侧自适应 1、子元素 float:left // html部分 <div c

梦里梦外;/ 2023年08月17日 17:39/ 0 赞/ 153 阅读

相关设置高度自适应不同设备屏幕的高度

qq音乐的歌曲播放页面，页面的宽度和设备宽度是一致，这时候我们就用的flex布局，但是首先要设置html和body宽度都为100%，因为百分比布局是相对父级元素来说的，有以下h

系统管理员/ 2023年07月05日 10:25/ 0 赞/ 38 阅读

相关上下布局高度自适应屏幕

要求上下布局：高度撑满整个屏幕 html <div class="layout"> <div class="header">111111<

偏执的太偏执、/ 2022年12月10日 02:26/ 0 赞/ 201 阅读

相关 HTML_根据屏幕的大小自适应 rem布局

<!DOCTYPE html> <html> <head> <title>rem自适应</title> <style t

偏执的太偏执、/ 2022年11月07日 13:21/ 0 赞/ 256 阅读

相关普通web网页自适应移动设备屏幕

<mate>标签的设置如下 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <me

末蓝、/ 2022年08月26日 00:45/ 0 赞/ 212 阅读

相关自适应设备屏幕布局

//在不同设备大小下，只要更改html的font-size值即可 (function(win) { var d

谁借莪１个温暖的怀抱￠/ 2022年07月14日 11:11/ 0 赞/ 270 阅读

相关 Android布局之屏幕自适应

Android布局之屏幕自适应在做应用时发现程序没有屏幕自适应功能，变换手机使用之后，界面就很混乱了，字体也很奇怪。经过百度的帮助，找到自适应

迷南。/ 2022年06月13日 07:09/ 0 赞/ 296 阅读

相关自适应屏幕设置

参考[@media自适应屏幕][media] 1024\500 （8.9寸） 1024\768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ） 1

我就是我/ 2022年05月23日 10:49/ 0 赞/ 306 阅读

相关 Android布局之屏幕自适应

Android布局之屏幕自适应在做应用时发现程序没有屏幕自适应功能，变换手机使用之后，界面就很混乱了，字体也很奇怪。经过百度的帮助，找到自适应方法。

电玩女神/ 2022年05月15日 00:37/ 0 赞/ 468 阅读

相关 unity屏幕自适应

下面以竖屏游戏为例，步骤如下： 1.新建工程 2.选择发布平台。File--BuildSettings...--PlatForm里面选择平台--Switch Platf

喜欢ヅ旅行/ 2021年09月16日 05:42/ 0 赞/ 525 阅读