美文网首页
移动端自适应方案

移动端自适应方案

作者: 圣地亚哥僵尸 | 来源:发表于2021-03-19 12:27 被阅读0次
绑定浏览器缩放和加载事件,动态修正跟字体大小
var docEl = document.documentElement,
        //当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
        //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
        //总来的来就是监听当然窗口的变化,一旦有变化就需要重新设置根字体的值
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recale = function() {
            docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'

        }
        //绑定浏览器缩放与加载事件
    window.addEventListener(resizeEvt, recale, false)
    document.addEventListener('DOMContentLoaded', recale, false)

相关文章

  • 可伸缩布局flexible

    gitHub地址: GitHub - amfe/lib-flexible: 可伸缩布局方案 移动端自适应方案,相关...

  • 移动端rem自适应方案

    移动端rem自适应方案传送门https://segmentfault.com/a/1190000012225828

  • flexible

    移动端自适应方案 flexible github: https://github.com/amfe/lib-fle...

  • 记一次前端技术分享(移动端相关概念讲解)

    移动端开发中的相关概念讲解 1、移动端自适配方案 移动端如何根据不同手机尺寸进行页面的适配 rem 自适应和 vw...

  • 移动端自适应解决方案

    移动端自适应解决方案 谈到移动端自适应这个话题,如果要真正做好,那应该说是前端开发中的一个比较难以掌握的知识点了。...

  • 移动端自适应方案

    问题来源 传统web开发我们一般只需要用像素去描述dom的宽高,但考虑到移动端屏幕的尺寸千奇百怪,我们希望找到一种...

  • 移动端自适应方案

    自适应需要从以下几个方面入手:布局、字体、retina带来的问题 一、布局: 1. 用%做单位老方案,兼容性高在制...

  • 移动端自适应方案

    一、基础原理 1.基准值 (1)选择一种尺寸作为设计和开发的基准。(2)定义适配规则,自动适配其他屏幕下的尺寸。 ...

  • 移动端自适应方案

    绑定浏览器缩放和加载事件,动态修正跟字体大小

  • 移动端自适应方案

    移动端适配的目标是让页面在移动设备上可以合理展示 viewport缩放方案 在对设计稿还原时,不需要去关注移动设备...

网友评论

      本文标题:移动端自适应方案

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