rem适配

作者: _花 | 来源:发表于2018-10-31 14:47 被阅读0次

方法一:自己写

+function(doc,win){
            var html = document.getElementsByTagName("html")[0];
            reEvt =  'orientationchange' in window ? 'orientationchange' : 'resize';
            reFontSize = function(){
                var width = document.documentElement.clientWidth;
                var fontSize = (width / 750)*100 ;
                html.style.fontSize = fontSize + "px";
            }
            win.addEventListener(reEvt, reFontSize);
            doc.addEventListener('DOMContentLoaded',reFontSize);
}(document,window)

DOMContentLoaded 等价于$(document).ready(function() { // ...代码... });
orientationchange

方法二:运用淘宝的适配方案

https://github.com/amfe/lib-flexible

各家移动端适配在大的方向都是用的rem适配原理,但又有各自不同,像文字大小并没有用rem,而是用媒体查询来控制,有的顶部ba不管在任何吃岑的手机大小都不变,有的却不变文字大小,只变宽高。
要结合自己的页面特点选择适合自己的适配方法

可以参考:https://www.cnblogs.com/noobfly/p/6207832.html

相关文章

  • 适配rem

    PPI 计算 适配rem

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。...

  • React 配置 rem (移动端适配)

    移动端适配方案介绍 在移动端中,为了设配不同的设备,通常使用rem来做适配。 rem是通过根元素进行适配的,网页中...

  • 移动端适配及pc端跳转代码

    移动端rem适配 pc端跳转

  • loding...

    移动端适配 remflexible.js也是rem适配的,它是将设备分成10份,1rem等于1/10。分析其中部分...

  • 移动Web

    屏幕适配 rem适配 1、设置 设置页面元素宽度单位为 rem 或 em注:此方案比较灵活,我们的案例将采用这种方...

  • 移动端之js控制rem,适配字体

    移动端之js控制rem,适配字体

  • rem布局

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

  • 移动端适配方案

    @description 该方法是用于移动端适配功能, 结合淘宝的适配方案flexible + rem 实现适配,...

网友评论

      本文标题:rem适配

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