移动端适配

奇奇怪怪~

于 2021-10-24 19:45:07 发布

阅读量1.6k

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/wang12345111/article/details/120938900

版权

本文介绍了移动端适配的关键技术，包括视口标签的使用，如`<meta name="viewport">`，以及移动端常用的布局单位如px, %, em, rem, vw, vh。详细解析了各单位的含义和应用场景，并提供了移动端适配的解决方案，强调了一种适配代码实现，通过1rem=100px确保页面在不同设备上的显示效果。" 114474555,10539676,Windows环境下X86平台VxWorks 6.6在QEMU上的模拟运行,"['嵌入式开发', '操作系统', 'VxWorks', 'QEMU', '模拟器']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.移动端视口标签

标签中 name="viewport" 表示：视口标签属性

content是规则属性：其中规则意思如下

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=1.0：表示最小的缩放比例

maximum-scale=1.0：表示最大的缩放比例

user-scalable=no：表示用户是否可以调整缩放比例

2.移动端常用单位：px / % / em /rem / vw / vh* /

1.px:像素单位

2.%:百分比布局单位

3.em:

                1em = 1 * font-size,
                5em = 5 * font-size
                如果自身有 font-size 的话以自身为准，如果自身 font-size 就是以 em 为单位或者没有 font-size 的话，就会从父容器继承。
                em 不经常使用，但是有时也会比较好用，如：字符缩进。

4.rem

rem 是 root 根元素的 font-size ，即 html 元素的 font-size。

假设，640px 的设备 1 rem = 100px，等比缩放的公式为：

1 rem = document.clientWidth / 640 * 100px;

5.vw

vw 表示视口宽度，1vw 表示视口宽度的 1%。

6.vh

vh表示视口高度，1vh表示视口高度的 1%。

3.移动端适配

前提条件;移动端就是手机端，因为手机有很多种，屏幕大小有很多种，这时候就需要写的移动端页面能适应所有屏幕大小。

适配方案：

移动端适配方案有很多种，因为复杂就不做过多解释，这里直接放我已经适配好的代码方便大家使用

(function(win) {
        var docEl = win.document.documentElement;
        var time;

        function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                if (width > 768) { // 最大宽度
                        width = 768;
                }
                var rem = width / 375*100;
                docEl.style.fontSize = rem + 'px';
                ///rem用font-size:100px来进行换算

        }

        win.addEventListener('resize', function() {
                clearTimeout(time);
                time = setTimeout(refreshRem, 1);
        }, false);
        win.addEventListener('pageshow', function(e) {
                if (e.persisted) {
                        clearTimeout(time);
                        time = setTimeout(refreshRem, 1);
                }
        }, false);

        refreshRem();

})(window)

只需要讲此代码引入所用页面，就完成移动端适配，此js 1rem=100px