移动端rem适配(750)

最新推荐文章于 2024-07-07 00:07:17 发布

前端cv工程师

最新推荐文章于 2024-07-07 00:07:17 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/m0_53044546/article/details/110677565

版权

本文介绍了如何进行移动端适配，特别是在设计稿为750px的情况下。通过在header中引入初始化和动态计算font-size的JavaScript文件，实现页面元素的自适应布局。

摘要由CSDN通过智能技术生成

移动端rem适配(设计稿750)

rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。

在header中引入以下两个js文件就能实现自适应:

初始化文件:

window['adaptive'].desinWidth = 750;// 设计图宽度
window['adaptive'].baseFont = 22;// 没有缩放时的字体大小
window['adaptive'].maxWidth = 750; // 页面最大宽度 默认540
window['adaptive'].init();// 调用初始化方法

动态计算font-size文件:

var adaptive = {
   };
(function (win, lib) {
   
    var doc = win.document;
    var docEl = doc.documentElement;
    // 设备像素比
    var devicePixelRatio = win.devicePixelRatio;
    // 我们设置的布局视口与理想视口的像素比
    var dpr = 1; 
    // viewport缩放值
    var scale = 1; 
    // 设置viewport
    function setViewport() {
   
        // 判断IOS
        var isIPhone = /iphone/gi.test(win.navigator.appVersion);
        if (lib.scaleType === 2 && isIPhone || lib.scaleType === 3) {
   
            dpr = devicePixelRatio;
        }
        // window对象上增加一个属性，提供对外的布局视口与理想视口的值
        win.devicePixelRatioValue = dpr;
        // viewport缩放值，布局视口缩放后刚好显示成理想视口的宽度，页面就不会过长或过短了
        scale = 1 / dpr;
        // 获取已有的viewport
        var hasMetaEl = doc.querySelector('meta[name="viewport"]')