css适配移动端

最新推荐文章于 2024-08-16 08:15:00 发布

itaffy

最新推荐文章于 2024-08-16 08:15:00 发布

阅读量290

点赞数

分类专栏：前端 css 文章标签： css

本文链接：https://blog.csdn.net/itaffy/article/details/102532061

版权

本文介绍了移动端CSS适配的三种方法：Media Queries媒体查询、Flex弹性布局以及rem结合viewport缩放。特别提到了一段关于使用rem和vm以及calc实践的最佳CSS代码。

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

'use strict';
(function(doc, win) {
   
    var docEl = doc.documentElement, // 获取html对象
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', // 横屏是否支持，不支持则为浏览器大小改变

        // 计算页面字体大小
        recalc = function() {
   
            // 获取页面宽度
            var clientWidth = docEl.clientWidth;
            // 获取不到页面宽度，直接返回
            if (!clientWidth) return;
            // 设置html字体大小(浏览器默认字体大小为16px)
            docEl.style.fontSize = clientWidth / 375 * 16 + "px";
        };
    // 不支持addEventListener,返回
    if (!doc.addEventListener) return;
    // 监听事件，获取当前html标签的字体大小
    win.addEventListener