前端rem适配

最新推荐文章于 2024-05-02 12:19:25 发布

Dreamy smile

最新推荐文章于 2024-05-02 12:19:25 发布

阅读量543

点赞数

分类专栏：项目开发记录 html--css vue 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45735728/article/details/106093005

版权

项目开发记录同时被 3 个专栏收录

24 篇文章 2 订阅

订阅专栏

vue

16 篇文章 0 订阅

订阅专栏

html--css

5 篇文章 0 订阅

订阅专栏

原生或jquery写一些简单的移动端下载页面、展示页面等…

new function() {
    var _self = this;
    _self.width = 640; // 设置默认最大宽度
    _self.fontSize = 100; // 默认字体大小
    _self.widthProportion = function() {
    var p = (document.body && document.body.clientWidth || document.getElementsByTagName("html")[0].offsetWidth) / _self.width;
    return p > 1 ? 1 : p < 0.5 ? 0.5 : p;
    };
    _self.changePage = function() {
    document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + _self.widthProportion() * _self.fontSize + "px !important; display:block");
    }
    _self.changePage();
    window.addEventListener('resize', function() {
    _self.changePage();
    }, false);
};

vue写h5/app

1.rem.js

!function(n){
    var  e=n.document,
        t=e.documentElement,
        i=750,
        d=i/100,
        o="orientationchange"in n?"orientationchange":"resize",
        a=function(){
            var n=t.clientWidth||320;n>720&&(n=720);
            t.style.fontSize=n/d+"px"
        };
    e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

2.main.js引入

import rem from '../static/js/rem-px.js';
Vue.use(rem);

原生html、css、js 做移动端

link标签引入rem.css
rem.css git地址：https://github.com/JGChao/remcss
使用 <html rem="750"></html>

Dreamy smile

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端rem适配

原生或jquery写一些简单的下载页面、展示页面等…new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认字体大小 _self.widthProportion = function() { var p = (document.body && document.body.clientWidth || document..
复制链接

扫一扫

专栏目录