zoukankan      html  css  js  c++  java
  • 跨设备自适应代码

    (function(){
        var a =function (){
            /*初始化赋值S*/
            var raines = this;
            raines.width = 640;//设置默认最大宽度(一般设计稿宽度为640px)
            raines.fontSize = 137;//默认字体大小(为方便计算所以) 1rem= 100px,可以改变该值便于计算
            var dpr = window.devicePixelRatio || 1;//如果识别到设备像素比的值,dpr就等于它,否则为1;
            var scale = 1 / dpr;
            var metaEl=document.querySelector('meta[name="viewport"]');
            var p=document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth;
            raines.widthProportion = function(){var i = p/raines.width;return i<0.5?0.5:i;};//设置像素比的方法i=浏览器宽度/640;用i的值跟0.5比较,如果小于0.5,则返回0.5,否则返回i的值;
            /*初始化赋值E*/
            raines.changePage = function(){
                document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+raines.widthProportion()*raines.fontSize*dpr+"px !important");
                metaEl.setAttribute('content', 'width=' + dpr * p + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
            };//改变页面比例的方法:动态初始化html的字体大小,动态改变mate[name="viewport"]里面的设备宽度,缩放比例
            raines.changePage();
        };
        a();
        /*  说明:
        **  引入该文件,头部别忘记加<meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=0">
        **          可以更改raines.fontSize的大小,当前值为137,单位换算为1rem=100px;
        **
        **        怪咖专用:动态识别设备像素比,进行自适应
        **
        **/
    })();
    
  • 相关阅读:
    关于margintop/bottom在nonReplaced inline元素上不起作用的解释
    css position
    css :three column +top box
    little box: two box
    css layout :center
    Absolute, Relative, Fixed Positioning: How Do They Differ?
    little box:three column
    利用position:absolute重叠元素
    C#生成(操作)PDF
    asp.net发布网站时三个选项的问题
  • 原文地址:https://www.cnblogs.com/raines/p/4962018.html
Copyright © 2011-2022 走看看