H5适配方案

最新推荐文章于 2024-08-10 23:05:55 发布
最新推荐文章于 2024-08-10 23:05:55 发布
阅读量736 收藏 4
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nbin2008/article/details/82965391
版权

一般ui设计，分为750，720，640宽，分别引入以下js

750

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    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 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 = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOSÏ£¬¶ÔÓÚ2ºÍ3µÄÆÁ£¬ÓÃ2±¶µÄ·½°¸£¬ÆäÓàµÄÓÃ1±¶·½°¸
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // ÆäËûÉ豸Ï£¬ÈÔ¾ÉʹÓÃ1±¶µÄ·½°¸
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        var rem = width / 7.5;
        docEl.style.fontSize = rem + 'px';
        var realitySize = parseInt(window.getComputedStyle(document.documentElement).fontSize);
        if (rem !== realitySize) {
            rem = rem * rem / realitySize;
            docEl.style.fontSize = rem + 'px';
        }

        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

720

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    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 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 = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        var rem = width / 7.2;
        docEl.style.fontSize = rem + 'px';
        var realitySize = parseInt(window.getComputedStyle(document.documentElement).fontSize);
        if (rem !== realitySize) {
            rem = rem * rem / realitySize;
            docEl.style.fontSize = rem + 'px';
        }

        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

640

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    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 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 = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        var rem = width / 6.4;
        docEl.style.fontSize = rem + 'px';
        var realitySize = parseInt(window.getComputedStyle(document.documentElement).fontSize);
        if (rem !== realitySize) {
            rem = rem * rem / realitySize;
            docEl.style.fontSize = rem + 'px';
        }

        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

在css中设置，以rem为单位

  • ui是100px，在css中使用 1rem
  • ui是10px，在css中使用 .1rem
  • ui是1px, 在css中使用 .01rem

字体的设置，需要在css中加下以下样式

[data-dpr="1"] .fz-12 {
    font-size: 6PX;
}
[data-dpr="2"] .fz-12 {
    font-size: 12PX;
}
[data-dpr="3"] .fz-12 {
    font-size: 18PX;
}
[data-dpr="1"] .fz-14 {
    font-size: 7PX;
}
[data-dpr="2"] .fz-14 {
    font-size: 14PX;
}
[data-dpr="3"] .fz-14 {
    font-size: 21PX;
}
[data-dpr="1"] .fz-16{
    font-size: 8PX;
}
[data-dpr="2"] .fz-16 {
    font-size: 16PX;
}
[data-dpr="3"] .fz-16 {
    font-size: 24PX;
}
[data-dpr="1"] .fz-18{
    font-size: 9PX;
}
[data-dpr="2"] .fz-18 {
    font-size: 18PX;
}
[data-dpr="3"] .fz-18 {
    font-size: 27PX;
}
[data-dpr="1"] .fz-20{
    font-size: 10PX;
}
[data-dpr="2"] .fz-20 {
    font-size: 20PX;
}
[data-dpr="3"] .fz-20 {
    font-size: 30PX;
}
[data-dpr="1"] .fz-22{
    font-size: 11PX;
}
[data-dpr="2"] .fz-22 {
    font-size: 22PX;
}
[data-dpr="3"] .fz-22 {
    font-size: 33PX;
}
[data-dpr="1"] .fz-24{
    font-size: 12PX;
}
[data-dpr="2"] .fz-24 {
    font-size: 24PX;
}
[data-dpr="3"] .fz-24 {
    font-size: 36PX;
}
[data-dpr="1"] .fz-26{
    font-size: 13PX;
}
[data-dpr="2"] .fz-26 {
    font-size: 26PX;
}
[data-dpr="3"] .fz-26 {
    font-size: 39PX;
}
[data-dpr="1"] .fz-28{
    font-size: 14PX;
}
[data-dpr="2"] .fz-28 {
    font-size: 28PX;
}
[data-dpr="3"] .fz-28 {
    font-size: 42PX;
}
[data-dpr="1"] .fz-30{
    font-size: 15PX;
}
[data-dpr="2"] .fz-30 {
    font-size: 30PX;
}
[data-dpr="3"] .fz-30 {
    font-size: 45PX;
}
[data-dpr="1"] .fz-32{
    font-size: 16PX;
}
[data-dpr="2"] .fz-32 {
    font-size: 32PX;
}
[data-dpr="3"] .fz-32 {
    font-size: 48PX;
}
[data-dpr="1"] .fz-34{
    font-size: 17PX;
}
[data-dpr="2"] .fz-34 {
    font-size: 34PX;
}
[data-dpr="3"] .fz-34 {
    font-size: 51PX;
}
[data-dpr="1"] .fz-36{
    font-size: 18PX;
}
[data-dpr="2"] .fz-36 {
    font-size: 36PX;
}
[data-dpr="3"] .fz-36 {
    font-size: 54PX;
}
[data-dpr="1"] .fz-38{
    font-size: 19PX;
}
[data-dpr="2"] .fz-38 {
    font-size: 38PX;
}
[data-dpr="3"] .fz-38 {
    font-size: 57PX;
}
[data-dpr="1"] .fz-40{
    font-size: 20PX;
}
[data-dpr="2"] .fz-40 {
    font-size: 40PX;
}
[data-dpr="3"] .fz-40 {
    font-size: 60PX;
}
[data-dpr="1"] .fz-42{
    font-size: 21PX;
}
[data-dpr="2"] .fz-42 {
    font-size: 42PX;
}
[data-dpr="3"] .fz-42{
    font-size: 63PX;
}
[data-dpr="1"] .fz-44{
    font-size: 22PX;
}
[data-dpr="2"] .fz-44 {
    font-size: 44PX;
}
[data-dpr="3"] .fz-44{
    font-size: 66PX;
}
[data-dpr="1"] .fz-48{
    font-size: 24PX;
}
[data-dpr="2"] .fz-48{
    font-size: 48PX;
}
[data-dpr="3"] .fz-48{
    font-size: 72PX;
}
[data-dpr="1"] .fz-50{
    font-size: 25PX;
}
[data-dpr="2"] .fz-50 {
    font-size: 50PX;
}
[data-dpr="3"] .fz-50 {
    font-size: 75PX;
}
[data-dpr="1"] .fz-60{
    font-size: 30PX;
}
[data-dpr="2"] .fz-60 {
    font-size: 60PX;
}
[data-dpr="3"] .fz-60 {
    font-size: 90PX;
}
[data-dpr="1"] .fz-80{
    font-size: 40PX;
}
[data-dpr="2"] .fz-80 {
    font-size: 80PX;
}
[data-dpr="3"] .fz-80 {
    font-size: 120PX;
}
  • 使用：ui字体是12px，html标签加上类名 .fz-12

如果要用px，也可以这样去用：

rem.less

.px2px(@name, @px){
    @{name}: round(@px / 2) * 1;
    [data-dpr="2"] & {
        @{name}: @px;
    }
    [data-dpr="3"] & {
        @{name}: round(@px / 2 * 3) * 1;
    }
}
nbin斌
关注
专栏目录
flexible.js 移动端自适应框架
黄沙百战穿金甲，不破楼兰终不还。
06-20 8655
;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="
vue项目屏幕自适应_vue项目PC端随屏幕分辨率与窗口大小自适应（五步完成，吐血干货）...
weixin_34650199的博客
12-24 9259
又见面了鸭！前言：这是用webpack创建的项目【壹】不同屏幕分辨率效果展示：A、1920*1080分辨率全屏显示的情况下：image.pngB、1600*900分辨率全屏显示的情况下：image.pngC、1024*768分辨率全屏显示的情况下：image.png【贰】不同浏览器窗口缩放时的效果展示：A、正常浏览窗口显示：image.pngB、缩放浏览窗口显示：image.png【叁】上述HTM...
rem.js
睡不够
10-09 480
(function(win,lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flex
H5屏幕适配方案
最新发布
wsl3465205046的博客
08-10 646
屏幕适配在现代 Web 开发中至关重要。使用响应式设计、视口单位、百分比宽度、流式布局、移动优先策略和合适的 meta 标签，你可以确保你的 H5 应用在各种设备上都能良好显示和使用。此外，借助流行的 CSS 框架和工具可以进一步简化适配过程。根据你的项目需求选择合适的方法，并结合实际测试来确保最佳用户体验。
使用Flexible实现手淘H5页面的终端适配二
小记心得
06-27 2058
之前，已经对此作了介绍，现优化整理出一个实用版本的flexible.js文件,可直接拷贝使用，代码如下： ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'
$(function)
各研发管理
01-17 84
这是JQUERY的内置函数，表示网页加载完毕后要执行的意思，和JAVASCRIPT原来的这个是一样的： window.onload=function(){ //执行函数} 相当于 $(document).ready(function(){ } ) $(document).ready(function(){ } ) 或者：<body onload="XX...
仿手淘的h5适配方案采用rem适配页面设计稿分10等分
08-08
本篇文章将深入探讨"仿手淘的H5适配方案"，该方案采用了`rem`来对页面设计稿进行10等分的适配策略。 首先，我们要理解什么是`rem`（root em）。`rem`是CSS中的长度单位，代表的是元素字体大小的单位，但这里的"根...
H5适配解决方案
huashui996521的博客
05-19 1242
1.H5适配解决方案 1.1 百分比 % 缺点：相对于父级width 1.2 em和rem em:相对于父级元素的font-size rem:相对于根字号，也就是html根标签的font-size 1.3 媒体查询 @media (max-width: 12450px) { //css样式 } 1.4 flex布局 思考一下：flex布局与响应式布局的区别？ flex:不会破坏布局结构 flex:1 1 1 响应式布局：会破坏布局，改变显示的内容，重要内容优先显示，其他内容可能放
H5移动端适配方案
txx_laughing的博客
04-21 2183
在讨论适配方案之前，先熟悉几个概念： 设备像素/物理像素：设备实际物理像素点，是显示设备中一个最微小的物理部件，每个像素可以根据操作系统设置自己的颜色和亮度。任何设备的物理像素的数量都是固定的。例如（iphone6 750 * 1337） （iphone6plus 1960 * 1080）。注意：设备像素不等于CSS像素 像素密度：屏幕上每英寸可以显示的像素点的数量，单位是PPI 屏幕分...
H5移动端适配 Flexible方案
09-01
《H5移动端适配Flexible方案详解》 在移动互联网时代，H5页面的适配问题显得尤为重要，尤其在各种屏幕尺寸、分辨率各异的设备中，如何确保页面在不同设备上呈现一致的效果，这就是Flexible方案的核心所在。本文将...
前端淘宝适配方案(vue)
L_3995的博客
08-17 1094
1.安装插件 npm i lib-flexible --save-dev 2.在main.js引入 import ‘lib-flexible/flexible.js’ 3.在plugins下建立文件夹lib-flexible里面加入flexible.js 代码如下： ;(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector(‘meta[name=“v
remjs移动端页面满屏H5自适应方案
08-11
移动端页面满屏H5自适应方案（采用rem作为单位，设计稿为750 * 1334 或者设计稿为640 * 1334）
移动端适配
小灯博客
04-19 4142
移动端适配js(function(doc,win){var docEl=doc.documentElement,resizeEvt='orientationchange'in window?'orientationchange':'resize',recalc=function(){var clientWidth=docEl.clientWidth;if(!clientWidth)return;do
vue项目屏幕自适应_vue项目自适应屏幕和浏览器
weixin_36002026的博客
12-24 2400
1.安装依赖npm i lib-flexible -Snpm i px2rem-loader -D2.在src文件夹下新建utils文件夹，在utils文件夹下新建flexible.js,其代码如下(function() {// flexible.cssvar cssText ='' +'@charset "utf-8";html{color:#000;background:#fff;overfl...
【前端库】html 移动端适配（meta方法）
老程
02-07 6410
案例单击我 js代码 ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySele...
rem动态屏幕适配解决方案
王攀
04-08 1666
(function (doc, win) { var docEl = doc.documentElement var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' var recalc = function () { var clientWidth = docEl.clien...
复制粘贴比人的remjs
weixin_30338497的博客
01-08 137
var adaptive = {};(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; // 设备像素比 var devicePixelRatio = win.devicePixelRatio; // 我们设置的布局视口与理想视口的像素比 var dpr =...
移动前端自适应适配方法
gs981600308的博客
11-21 2328
所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度，一种是使用rem自适应布局的flexible.js。各有利弊，使用第一种在某些浏览器的webview里面会出现兼容问题，而且对于1像素会无法渲染。而用rem的方案在背景和字体上也会有某些问题。 方案一：强制meta viewport的宽度为设...
移动端(手机端)页面自适应解决方案—rem布局篇
weixin_34320724的博客
11-30 624
移动端(手机端)页面自适应解决方案—rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340。结合网易、淘宝移动端首页html元素上的动态font-size属性、设计稿尺寸、前端与设计之间协作流程一般分为下面两种： 一、网易做法： 引入：页面开头处引入下面这段代码，用于动态计算font-size (function(doc, wi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值