美文网首页
rem适配布局

rem适配布局

作者: Sun_小杰杰哇 | 来源:发表于2018-12-27 14:55 被阅读0次

简介

使用rem+以下函数+设计稿的尺寸就可以适配页面。

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth <= 1024) clientWidth = 1024;
                docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

相关文章

  • 苏宁易购项目

    rem布局 认识rem rem适配1.伸缩布局 flex2.流式布局 百分比3.响应布局 媒体查询 (超小...

  • 2020-10-30 web移动端

    web移动端 1.重点:适配 2.目标:掌握4种适配方案 ( 流式布局、弹性布局、响应式布局、像素适配(rem适配...

  • rem布局

    这个可以适配rem布局的JS代码

  • 移动端开发

    视口 屏幕适配 布局 流体布局 响应式布局 rem布局 弹性盒模型布局

  • 移动端、PC端屏幕适配

    移动端适配 页面引入ydui.flexible.js页面布局采用rem布局rem计算方式:设计图尺寸px / 10...

  • rem布局适配

    适合PC端 rem适配布局 1、cnpm i amfe-flexible postcss-px2rem-exclu...

  • 电商项目笔记(3)---移动端适配

    步骤1:移动端适配 移动端适配无非就是以下3点: 百分比布局; rem尺寸计算; 媒体查询; 步骤2:rem.js...

  • HTML学习之图片字体适配

    移动h5 图片字体等适配WebApp开发之--"rem"单位Rem实现自适应初体验手机端页面自适应解决方案—rem布局

  • 网络编程(九)移动端布局(3)

    这里将要讲解移动WEB开发之rem适配布局 一、 rem基础 rem (root em)是一个相对单位,类似于em...

  • rem适配布局

    简介 使用rem+以下函数+设计稿的尺寸就可以适配页面。

网友评论

      本文标题:rem适配布局

      本文链接:https://www.haomeiwen.com/subject/joirlqtx.html