移动端web开发——像素的适配

最新推荐文章于 2024-07-25 09:33:21 发布
最新推荐文章于 2024-07-25 09:33:21 发布
阅读量1.8k 收藏 2
点赞数

像素和dpr

定义

像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix 是英语单词 picture 的常用简写，加上英语单词“元素” element，就得到 pixel，故“像素”表示“图像元素”之意，有时亦被称为 pel(picture element)

像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。

ppi 是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度

分类

像素分为两种：设备像素和 CSS 像素

  1. 设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
  2. CSS 像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在 CSS 和 javascript 中使用的一个抽象的层

CSS 声明和几乎所有的 javascript 属性都使用 CSS 像素，因此实际上从来用不上设备像素，唯一的例外是screen.width/height

//我们通过CSS和javascript代码设置的像素都是逻辑像素
width:300px;
font-size:16px;
缩放

(设备像素→深蓝色背景，CSS 像素→半透明背景)

在桌面端，css 的1个像素往往都是对应着电脑屏幕的1个物理像素。

//一个 CSS 像素完全覆盖了一个设备像素

image

而在手机端，由于屏幕尺寸的限制，缩放是经常性的操作。

//左图表示当用户进行缩小操作时，一个设备像素覆盖了多个 CSS 像素

//右图表示当用户进行放大操作时，一个 CSS 像素覆盖了多个设备像素

image image

不论我们进行缩小或放大操作，元素设置的 CSS 像素(如width:300px)是始终不变的，而一个 CSS 像素对应多少个设备像素是根据当前的缩放比例来决定的

DPR

设备像素比 DPR (devicePixelRatio) 是默认缩放为100%的情况下，设备像素和 CSS 像素的比值

DPR = 设备像素 / CSS像素(某一方向上)

在早先的移动设备中，并没有 DPR 的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从 iphone4 开始，苹果公司推出了所谓的 retina 视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的 PPI (屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4 的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是 DPR = 2

CSS 像素对应着理想视口，其对应的javascript属性是screen.width/screen.height。设备像素比 DPR 对应的 javascript 属性是window.devicePixelRatio

以 iphone5 为例，iphone5 的 CSS 像素为320px * 568px，DPR 是 2，所以其设备像素为640px * 1136px

640(px) / 320(px)  = 2
1136(px) / 568(px) = 2
640(px)*1136(px) /  320(px)*568(px) = 4
常用移动设备dpr
IOS设备PPIDPR
iPhone43262
iPhone4s3262
iPhone53262
iPhone5s3262
iPhone63262
iPhone6s3262
iPhone6 PLUS4413
iPhone6s PLUS4413
iPad --2
iPad --3
android尺寸dpr
低清设备－1
-－1.5
-－1.75
-－2
mx2800*12802.5
小米note720*12802.75
--3
三星note4-4
.........
.........

总的来说，ios设备的dpr总体来说比较一致。

解决方案

1. 淘宝的移动端布局方案 Flexible
/
    hotcss 可能有神奇的问题
/
!function() {
    var innerStyle = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html {outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",
        createStyle = document.createElement("style");
    if (document.getElementsByTagName("head")[0].appendChild(createStyle),
            createStyle.styleSheet)
        createStyle.styleSheet.disabled || (createStyle.styleSheet.cssText = innerStyle);
    else
        try {
            createStyle.innerHTML = innerStyle;
        } catch (ex) {
            createStyle.innerText = innerStyle;
        }
}();
! function(window, nameSpace) {
    var timer, doc = window.document,
        docEl = doc.documentElement,
        metaEl = doc.querySelector('meta[name="viewport"]'),
        flexibleEl = doc.querySelector('meta[name="flexible"]'),
        dpr = 0,
        scale = 0,
        Flexible = nameSpace.flexible || (nameSpace.flexible = {});
        // 给Flexible 开创命名空间
    //刷新rem
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        //width / dpr > 540 && (width = 540  dpr);
        if(width / dpr > 540) {
            width = 540  dpr ;
        }
        var rootSize = width / 10;
        docEl.style.fontSize = rootSize + "px",
         Flexible.rem = window.rem = rootSize;
    }
    if (metaEl) {
       console.warn('将根据已有的meta标签来设置缩放比例');
       var match = metaEl.getAttribute('content').match(/initial-scale=([\d.]+)/);
       if (match) {
           scale = parseFloat(match[1]);
           dpr = parseInt(1 / scale);
       }
       //如果在meta标签中，我们手动配置了flexible，则使用里面的内容
    } else if (flexibleEl) {
       var content = flexibleEl.getAttribute('content');
       if (content) {
           var initialDpr = content.match(/initial-dpr=([\d.]+)/);
           var maximumDpr = content.match(/maximum-dpr=([\d.]+)/);
           if (initialDpr) {
               dpr = parseFloat(initialDpr[1]);
               scale = parseFloat((1 / dpr).toFixed(2));
           }
           if (maximumDpr) {
               dpr = parseFloat(maximumDpr[1]);
               scale = parseFloat((1 / dpr).toFixed(2));
           }
       }
    }
    if (!dpr && !scale) {
        var isAndroid = window.navigator.appVersion.match(/android/gi);
        var isIPhone = window.navigator.appVersion.match(/iphone/gi);
        //devicePixelRatio这个属性是可以获取到设备的dpr的
        var devicePixelRatio = window.devicePixelRatio;
        if (isIPhone) {
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            dpr = 1;
        }
        scale = 1 / dpr;
    }
    if (docEl.setAttribute("data-dpr", dpr), !metaEl)
        if (metaEl = doc.createElement("meta"),
                metaEl.setAttribute("name", "viewport"),            //j = scale            //j = scale              //j = scale
                metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"),
                docEl.firstElementChild)
            docEl.firstElementChild.appendChild(metaEl);
        else {
            var createDiv = doc.createElement("div");
            createDiv.appendChild(metaEl),
                doc.write(createDiv.innerHTML)
            }
    window.addEventListener("resize", function() {
                clearTimeout(timer),
                    timer = setTimeout(refreshRem, 300);
        }, !1),
            window.addEventListener("pageshow", function(a) {
            a.persisted && (clearTimeout(timer),
                timer = setTimeout(refreshRem, 300))
        }, !1),
        "complete" === doc.readyState ? doc.body.style.fontSize = 17  dpr + "px" : doc.addEventListener("DOMContentLoaded", function() {
            doc.body.style.fontSize = 17  dpr + "px"
        }, !1),
        refreshRem(),
        Flexible.dpr = window.dpr = dpr,
        Flexible.refreshRem = refreshRem,
        Flexible.rem2px = function(a) {
            var pxValue = parseFloat(a)  this.rem;
            return "string" == typeof a && a.match(/rem$/) && (pxValue += "px"), pxValue ;
        },
        Flexible.px2rem = function(a) {
            var remValue = parseFloat(a) / this.rem;
            return "string" == typeof a && a.match(/px$/) && (remValue += "rem"), remValue ;
        }
}(window, window.lib || (window.lib = {}));

核心方法如下：

if (metaEl) {
    console.warn('将根据已有的meta标签来设置缩放比例');
    var match = metaEl.getAttribute('content').match(/initial-scale=([\d.]+)/);
    if (match) {
        scale = parseFloat(match[1]);
        dpr = parseInt(1 / scale);
    }
    //如果在meta标签中，我们手动配置了flexible，则使用里面的内容
} else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content');
    if (content) {
        var initialDpr = content.match(/initial-dpr=([\d.]+)/);
        var maximumDpr = content.match(/maximum-dpr=([\d.]+)/);
        if (initialDpr) {
            dpr = parseFloat(initialDpr[1]);
           scale = parseFloat((1 / dpr).toFixed(2));
       }
       if (maximumDpr) {
           dpr = parseFloat(maximumDpr[1]);
           scale = parseFloat((1 / dpr).toFixed(2));
       }
   }
}

if (!dpr && !scale) {
    var isAndroid = window.navigator.appVersion.match(/android/gi);
    var isIPhone = window.navigator.appVersion.match(/iphone/gi);
    //devicePixelRatio这个属性是可以获取到设备的dpr的
    var devicePixelRatio = window.devicePixelRatio;
    if (isIPhone) {
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        dpr = 1;
        // 其他设备仍旧使用1倍的方案
    }
    scale = 1 / dpr;
}

这里只对ios作了处理，android 仍采用了1倍的布局方案。

2. 另一种方案 hotcss.js
(function(window, document) {
    'use strict';
    //给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。
    var hotcss = {};
    (function() {
        //根据devicePixelRatio自定计算scale
        //可以有效解决移动端1px这个世纪难题。
        var viewportEl = document.querySelector('meta[name="viewport"]'),
            hotcssEl = document.querySelector('meta[name="hotcss"]'),
            dpr = window.devicePixelRatio || 1,
            maxWidth = 540,
            designWidth = 0;
        dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
        //允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
        if (hotcssEl) {
            var hotcssCon = hotcssEl.getAttribute('content');
            if (hotcssCon) {
                var initialDprMatch = hotcssCon.match(/initial-dpr=([\d.]+)/);
                if (initialDprMatch) {
                    dpr = parseFloat(initialDprMatch[1]);
                }
                var maxWidthMatch = hotcssCon.match(/max-width=([\d.]+)/);
                if (maxWidthMatch) {
                    maxWidth = parseFloat(maxWidthMatch[1]);
                }
                var designWidthMatch = hotcssCon.match(/design-width=([\d.]+)/);
                if (designWidthMatch) {
                    designWidth = parseFloat(designWidthMatch[1]);
                }
            }
        }
        document.documentElement.setAttribute('data-dpr', dpr);
        hotcss.dpr = dpr;
        document.documentElement.setAttribute('max-width', maxWidth);
        hotcss.maxWidth = maxWidth;
        if (designWidth) {
            document.documentElement.setAttribute('design-width', designWidth);
            hotcss.designWidth = designWidth;
        }
        var scale = 1 / dpr,
            content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';
        if (viewportEl) {
            viewportEl.setAttribute('content', content);
        } else {
            viewportEl = document.createElement('meta');
            viewportEl.setAttribute('name', 'viewport');
            viewportEl.setAttribute('content', content);
            document.head.appendChild(viewportEl);
        }
    })();
    hotcss.px2rem = function(px, designWidth) {
        //预判你将会在JS中用到尺寸，特提供一个方法助你在JS中将px转为rem。就是这么贴心。
        if (!designWidth) {
            //如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
            //否则可以在第二个参数告诉我你的设计图是多大。
            designWidth = parseInt(hotcss.designWidth, 10);
        }
        return parseInt(px, 10)  320 / designWidth / 20;
    }
    hotcss.rem2px = function(rem, designWidth) {
        //新增一个rem2px的方法。用法和px2rem一致。
        if (!designWidth) {
            designWidth = parseInt(hotcss.designWidth, 10);
        }
        //rem可能为小数，这里不再做处理了
        return rem  20  designWidth / 320;
    }
    hotcss.mresize = function() {
        //对，这个就是核心方法了，给HTML设置font-size。
        var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
        if (hotcss.maxWidth && (innerWidth / hotcss.dpr > hotcss.maxWidth)) {
            innerWidth = hotcss.maxWidth  hotcss.dpr;
        }
        if (!innerWidth) {
            return false;
        }
        document.documentElement.style.fontSize = (innerWidth * 20 / 320) + 'px';
        hotcss.callback && hotcss.callback();
    };
    hotcss.mresize();
    //直接调用一次
    window.addEventListener('resize', function() {
        clearTimeout(hotcss.tid);
        hotcss.tid = setTimeout(hotcss.mresize, 33);
    }, false);
    //绑定resize的时候调用
    window.addEventListener('load', hotcss.mresize, false);
    //防止不明原因的bug。load之后再调用一次。
    setTimeout(function() {
        hotcss.mresize();
        //防止某些机型怪异现象，异步再调用一次
    }, 333)
    window.hotcss = hotcss;
    //命名空间暴露给你，控制权交给你，想怎么调怎么调。
})(window, document);

里面有这样简单粗暴的设置：

dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );
3. 前端开发博客的方案

<span style="font-family: Arial, Helvetica, sans-serif;">动态写dpr和根元素的fontsize：  </span> 

!function(x) {  
    function w() {  
        var a = r.getBoundingClientRect().width;  
        a / v > 540 && (a = 540 * v), x.rem = a / 16, r.style.fontSize = x.rem + "px"  
    }  
    var v, u, t, s = x.document, r = s.documentElement, q = s.querySelector('meta[name="viewport"]');  
    if (q) {  
        console.warn("将根据已有的meta标签来设置缩放比例");  
        var o = q.getAttribute("content").match(/initial\-scale=(["‘]?)([\d\.]+)\1?/);  
        o && (u = parseFloat(o[2]), v = parseInt(1 / u))  
    }  
    if (!v && !u) {  
        var n = (x.navigator.appVersion.match(/android/gi), x.navigator.appVersion.match(/iphone/gi)), v = x.devicePixelRatio;  
        v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, u = 1 / v  
    }  
    if (r.setAttribute("data-dpr", v), !q) {  
        if (q = s.createElement("meta"), q.setAttribute("name", "viewport"), q.setAttribute("content", "initial-scale=" + u + ", maximum-scale=" + u + ", minimum-scale=" + u + ", user-scalable=no"), r.firstElementChild) {  
            r.firstElementChild.appendChild(q)  
        } else {  
            var m = s.createElement("div");  
            m.appendChild(q), s.write(m.innerHTML)  
        }  
    }  
    x.dpr = v, x.addEventListener("resize", function() {  
        clearTimeout(t), t = setTimeout(w, 300)  
    }, !1), x.addEventListener("pageshow", function(b) {  
        b.persisted && (clearTimeout(t), t = setTimeout(w, 300))  
    }, !1), "complete" === s.readyState ? s.body.style.fontSize = 12 * v + "px" : s.addEventListener("DOMContentLoaded", function() {  
        s.body.style.fontSize = 12 * v + "px"  
    }, !1), w()  
}(window);
4. 耿旭亮的方案

直接存为一个 viewport.js 文件，在所有js中最先引入该文件

!function(win, lib) {
    var timer,
        doc     = win.document,
        docElem = doc.documentElement,

        vpMeta   = doc.querySelector('meta[name="viewport"]'),
        flexMeta = doc.querySelector('meta[name="flexible"]'),
 
        dpr   = 0,
        scale = 0,
 
        flexible = lib.flexible || (lib.flexible = {});
 
    // 设置了 viewport meta
    if (vpMeta) {
 
        console.warn("将根据已有的meta标签来设置缩放比例");
        var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
 
        if (initial) {
            scale = parseFloat(initial[1]); // 已设置的 initialScale
            dpr = parseInt(1 / scale);      // 设备像素比 devicePixelRatio
        }
 
    }
    // 设置了 flexible Meta
    else if (flexMeta) {
        var flexMetaContent = flexMeta.getAttribute("content");
        if (flexMetaContent) {
 
            var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
                maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);
 
            if (initial) {
                dpr = parseFloat(initial[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
 
            if (maximum) {
                dpr = parseFloat(maximum[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }
 
    // viewport 或 flexible
    // meta 均未设置
    if (!dpr && !scale) {
        // QST
        // 这里的 第一句有什么用 ?
        // 和 Android 有毛关系 ?
        var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
            _dpr = win.devicePixelRatio;
 
        // 所以这里似乎是将所有 Android 设备都设置为 1 了
        dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
                        ? 3
                        : (_dpr >= 2 && (!dpr || dpr >= 2))
                            ? 2
                            : 1
                  )
                : 1;
 
        scale = 1 / dpr;
    }
 
    docElem.setAttribute("data-dpr", dpr);
 
    // 插入 viewport meta
    if (!vpMeta) {
        vpMeta = doc.createElement("meta");
         
        vpMeta.setAttribute("name", "viewport");
        vpMeta.setAttribute("content",
            "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
 
        if (docElem.firstElementChild) {
            docElem.firstElementChild.appendChild(vpMeta)
        } else {
            var div = doc.createElement("div");
            div.appendChild(vpMeta);
            doc.write(div.innerHTML);
        }
    }
 
    function setFontSize() {
        var winWidth = docElem.getBoundingClientRect().width;
 
        if (winWidth / dpr > 540) {
            (winWidth = 540 * dpr);
        }
 
        // 根节点 fontSize 根据宽度决定
        var baseSize = winWidth / 10;
 
        docElem.style.fontSize = baseSize + "px";
        flexible.rem = win.rem = baseSize;
    }
 
    // 调整窗口时重置
    win.addEventListener("resize", function() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false);
 
     
    // orientationchange 时也需要重算下吧
    win.addEventListener("orientationchange", function() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false);
 
 
    // pageshow
    // keyword: 倒退 缓存相关
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 设置基准字体
    if ("complete" === doc.readyState) {
        doc.body.style.fontSize = 12 * dpr + "px";
    } else {
        doc.addEventListener("DOMContentLoaded", function() {
            doc.body.style.fontSize = 12 * dpr + "px";
        }, false);
    }
  
    setFontSize();
 
    flexible.dpr = win.dpr = dpr;
 
    flexible.refreshRem = setFontSize;
 
    flexible.rem2px = function(d) {
        var c = parseFloat(d) * this.rem;
        if ("string" == typeof d && d.match(/rem$/)) {
            c += "px";
        }
        return c;
    };
 
    flexible.px2rem = function(d) {
        var c = parseFloat(d) / this.rem;
         
        if ("string" == typeof d && d.match(/px$/)) {
            c += "rem";
        }
        return c;
    }
}(window, window.lib || (window.lib = {}));
AmberQu
关注
app.zip_APP开发_node_移动端web
09-24
在IT行业中，移动应用开发是不可或缺的一部分，尤其是在当今数字化时代，移动端Web技术的快速发展使得开发者能够构建出跨平台、响应式且用户体验优秀的应用程序。在这个"app.zip_APP开发_node_移动端web"的压缩包中...
移动端页面开发适配 rem布局原理
风中追风
03-19 4677
我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；设备独立像素(density-independent pixel)
vue项目：大屏自适应解决方案（两种）
热门推荐
qq_44560147的博客
11-24 1万+
vue大屏自适应解决方案， 移动端自适应方案，vue3， vue2。适配方案
传统web 1920px适配iPad和所有的高分辨率大屏2K、4K、8K
最新发布
qq_34701838的博客
07-25 460
之前一直被网上的解决方案带偏，经过仔细的思考后决定还是不能使用像素比来处理缩放这样会存在偏差，其实解决很简单你只要拿到body的真是宽度就行然后除以设计稿的宽度就是你的缩放比，上代码。然后需要注意的一点就是页面在高清分辨率上字体要调整为自适应字体，以及各种动效页面注意怕错误留白需要收到调整下。
使用Flexible实现手淘H5页面的终端适配
weixin_30337157的博客
11-23 1228
使用Flexible实现手淘H5页面的终端适配 曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？ 那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家...
移动端页面像素值的适配问题的几种处理方式
weixin_44932605的博客
11-15 591
移动端页面像素值适配问题的几种处理方式 移动端机型巨多，各种屏幕分辨率，眼花缭乱！作为前端开发，样式的适配性也显得非常重要！那么。今天，就说说我在之前h5开发过程中，对于像素值的适配问题的几种解决方法 ...
自定义像素适配
墨玉浮白的博客
03-17 369
文章目录一、简述二、实现2.1 通过单例获取当前设备的宽高2.2 获取屏幕的宽高2.3 获取状态栏高度2.4 计算缩放比例三、使用四、完整代码五、注意 一、简述 自定义像素适配，就是以一个特定宽度尺寸的设备为基准，在view的加载过程中，根据当前设备的实际像素换算出目标像素，再作用于控件上。 二、实现 2.1 通过单例获取当前设备的宽高 // 获取单例方法 public static U...
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
移动端+pc端自适应适配解决方案
06-29
适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js...
vue2项目PC端屏幕分辨率与窗口大小自适应
qq_48731975的博客
05-19 2094
vue2项目PC端屏幕分辨率与窗口大小自适应
Vue项目pc端适配方案（scss）
weixin_45371730的博客
08-18 3295
Vue项目scss语法时pc端适配方案
【原】移动端界面的适配
weixin_33859665的博客
06-17 160
摘要：在进行移动端界面的书写的时候，如果把宽度高度或者字体大小全部写死的话，那么在所有手机上看到的大小都一样，存在的问题就是同样大小的字体，或者一个盒子模型， 在大屏幕手机上看起来会有点偏小。比如iphone6PLUS。如果是做成适配的话，就很好的解决了这个问题，大屏幕显示的内容大一点，小屏幕显示的小一点。 所以今天做一个移动端页面适配的小小总结 适配的要求 1、在不同分辨率...
前端页面最佳适配方案px转rem(野草蛮生)
weixin_52923266的博客
12-04 1238
前端页面最佳适配方案px转rem
移动端页面适配———多方案解析
面向对象的夜猫子
09-26 2095
在移动互联网快速发展的今天，手机的种类和尺寸越来越多，作为前端的小伙伴们可能会越来越头疼，但又不得不去适配一款又一款的新机型。对于移动端适配，不同的公司、不同的团队有不同的解决方案。我在项目中也用了一部分解决方案，也看到了一些解决方案，对比下，总结一些自己的理解，希望对各位有帮助，找到最适合你们项目的适配方案。
vue项目屏幕自适应_详解vue2.0 不同屏幕适配及px与rem转换问题
weixin_35625309的博客
01-14 728
if (metaEl) {//console.warn('将根据已有的meta标签来设置缩放比例');var match = metaEl.getAttribute('content').match(/initial-scale=([\d.]+)/);if (match) {scale = parseFloat(match[1]);dpr = parseInt(1 / scale);}} else...
移动端rem自适应方案
Toleranty的博客
12-01 1320
假设设计妹妹给我们的设计稿尺寸为750 * 1340。结合网易、淘宝移动端首页html元素上的font-size属性，html5设计稿尺寸以及前端与设计之间协作流程一般分为下面两种： 一、网易做法： 引入：页面开头处引入下面这段代码，用于动态计算font-size (function(doc, win) { var docEl = doc.documentElement,
前端---【移动端开发的屏幕适配】
m0_61307468的博客
07-14 2447
dpr = 物理像素 / 设备独立像素,适配场景：实际开发中上线后的移动端项目需要在不同的手机上供用户使用访问，不同的手机屏幕尺寸大小不一样。关键点：等比。pc端视口的默认宽度和浏览器窗口的宽度一致；在 css 标准文档中，视口也被称为：初始包含块； 它是所有 css 百分比宽度推算的根源；方法：拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后直接按照设计稿给宽高进行布局即可。 优点：不用复杂的计算，直接使用图稿上标注的px值 缺点： 有些不希望被适配的东西，例如边框，也被适配了，导致比设计稿大的设
flexible.js 适配移动端详解
weixin_71280597的博客
02-18 949
flexible.js 适配移动端详解
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值