精华内容
下载资源
问答
  • pc端适配不同分辨率
    千次阅读
    2022-04-28 17:39:54
    • 以1920* 1080的设计稿为例,实现PC端不同分辨率适配
    <script TYPE="text/javascript"> 	 
    	  var docEl = document.documentElement;
     	  
          function setRemUnit () {
            var rem = docEl.clientWidth / 19.2; // 可根据不同电脑分辨率进行手动修改(如1920*1080 为19.2
            docEl.style.fontSize = rem + 'px'
          }
    
          setRemUnit()
    
          window.addEventListener('resize', setRemUnit)
          window.addEventListener('pageshow', function (e) {
            if (e.persisted) {
              setRemUnit()
            }
    	  })
    </script>
    
    更多相关内容
  • pc端不同分辨率适配

    千次阅读 2020-08-17 15:10:26
    1、以1920* 1080的设计稿为例,实现PC端不同分辨率适配 2、安装依赖 npm install --save lib-flexible 或者 yarn addlib-flexible -save npm installpx2rem-loader -D或者 yarn addpx2rem-loader npm 安装不上时...

    1、以1920* 1080的设计稿为例,实现PC端不同分辨率适配

    2、安装依赖

     npm install --save lib-flexible     或者  yarn add lib-flexible -save

    npm  install   px2rem-loader -D 或者  yarn add px2rem-loader

    npm 安装不上时可以用cnpm 

    3、在utils文件下新建 一个 js 文件  如 viewport.js 代码如下

    (function() {
        var cssText =
            '' +
            '@charset "utf-8";html{color:#000;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}body,html{font-family:"Microsoft YaHei",sans-serif,Tahoma,Arial}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}input,input[type=button],input[type=reset],input[type=submit]{resize:none;border:none;-webkit-appearance:none;border-radius: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:after,q:before{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}a,ins{text-decoration:none}a:active,a:hover,a:link,a:visited{background:0 0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;outline:0;text-decoration:none}';
        // cssText end
    
        var styleEl = document.createElement('style');
        document.getElementsByTagName('head')[0].appendChild(styleEl);
        if (styleEl.styleSheet) {
            if (!styleEl.styleSheet.disabled) {
                styleEl.styleSheet.cssText = cssText;
            }
        } else {
            try {
                styleEl.innerHTML = cssText;
            } catch (e) {
                styleEl.innerText = cssText;
            }
        }
    })();
    
    
    ;
    (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 > 540) {
                width = width * dpr;
            }
            var rem = width / 10;
            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'] = {}));

    4、在 main.js 引入 viewport.js 

    5、修改build中的配置文件 utils.js ,加入以下代码

    const px2remLoader = {

      loader: "px2rem-loader",

      options: {

        //这个参数是通过psd设计稿的  宽度 / 10 来计算,这里以1920为标准

        remUnit: 192

      }

    };

    6、修改  generateLoaders 方法中的 loaders 如下:

    const loaders = options.usePostCSS

          ? [cssLoader, postcssLoader, px2remLoader]

          : [cssLoader, px2remLoader];

    7、完成以上六步以后就可以按照设计图1:1开发了,单位仍然用px,例如:

    温馨提示:

    1、css不能写在行内,行内样式不能转为rem 

    2、背景图片   background-size为  auto 不能自适应 

    3、修改完以后需要重新启动项目 

     

     

     

    展开全文
  • 主要介绍了vue实现PC端分辨率适配操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue项目PC端如何适配不同分辨率屏幕

    千次阅读 多人点赞 2020-10-19 11:16:38
    项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 前方有坑:UI框架部分组件使用JavaScript将...

    配置前言
    项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配
    实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位
    前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !important "进行样式覆盖。

    第一步,安装postcss-px2rem及px2rem-loader
    打开命令行工具,输入以下指令安装插件(当然用淘宝镜像cnpm安装会更快)

    npm install postcss-px2rem px2rem-loader --save
    

    1
    第二步,在根目录src中新建utils目录下新建rem.js等比适配文件
    复制以下代码
    // rem等比适配配置文件
    // 基准大小

    const baseSize = 16
    // 设置 rem 函数
    function setRem () {
      // 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
      const scale = document.documentElement.clientWidth / 1920
      // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
      document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem()
    }
    

    第三步,在main.js中引入适配文件

    import './utils/rem'
    

    1
    第四步,到vue.config.js中配置插件

    // 引入等比适配插件
    const px2rem = require('postcss-px2rem')
    
    // 配置基本大小
    const postcss = px2rem({
      // 基准大小 baseSize,需要和rem.js中相同
      remUnit: 16
    })
    
    // 使用等比适配插件
    module.exports = {
      lintOnSave: true,
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              postcss
            ]
          }
        }
      }
    }
    

    亲测有效!!!!!!!

    适配二
    1、安装lib-flexible

    npm i lib-flexible --save
    

    2、在项目入口文件main.js中引入lib-flexible

    import 'lib-flexible/flexible.js'
    

    3、在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签

    // 删除
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    使用postcss-pxtorem,用于将像素单元生成rem单位。

    安装依赖
    npm install postcss-pxtorem -D
    

    2.设置规则(在package.json中配置如下)

     "postcss": {
      "plugins": {
       "autoprefixer": {},
        "postcss-pxtorem": {
          "rootValue": 64,
         "propList": [
           "*"
         ]
       }
     }
    },
    
    展开全文
  • vue3.0 PC端自适应不同分辨率电脑

    千次阅读 2022-01-19 13:57:41
    使用rem单位去做页面的适配,先来了解一下什么是rem。rem是CSS3新增的一个相对单位(root em,根em),我们可以通过去设定X rem=Y px(x和y为自定义数值)如图设定1rem=10px 第一步:安装相应的依赖为我们自动将...

    使用rem单位去做页面的适配,先来了解一下什么是rem。rem是CSS3新增的一个相对单位(root em,根em),我们可以通过去设定X rem=Y px(x和y为自定义数值)如图设定1rem=10px
    在这里插入图片描述
    第一步:安装相应的依赖为我们自动将全局的px转换成rem

    npm i lib-flexible-computer -S 
    npm i px2rem-loader -D
    npm i postcss-px2rem
    

    第二步:在main.js中引入

    import "lib-flexible-computer";
    

    第三步:src同级下建立一个vue.config.js文件,增加以下代码

    module.exports = {
      publicPath: "./",
      css: {   //添加该部分代码
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require("postcss-px2rem")({  //引入
                remUnit: 192///设计图宽度/10
              })
            ]
          }
        }
      }
    };
    

    到这一步可以发现,页面可以根据浏览器窗口的缩放而变化,但是新的问题就出现了,当窗口大小减小时,页面内容也跟着减少直至看不见。想让窗口缩小到一定比例后不再缩小。

    第四步:修改flexible-computer.js依赖代码,设置窗口rem比例
    可以获取系统实际分辨率宽度和窗口宽度,判断rem的比例

    //原代码获取窗口宽度
    var width = docEl.getBoundingClientRect().width;
    //获取系统分辨率宽度
    var docScreen = windows.screen.width;
    
    //根据自身增加判断 (仅供参考)
    if(docScreen/width<1.1){
        var rem = width / 10;
    }else{
    	var rem = docScreen / 10;
    }
    

    参考文章https://blog.csdn.net/liulubo520/article/details/113657610

    展开全文
  • # 设计图纸给的是1336*768的,而我的电脑是1920*1080的,想要我的电脑完美的显示出来,怎么做适配??非常急,只做pc端适配,详细点,谢谢(我自己有做rem适配,做完发现高度不够)
  • vue项目的PC端不同分辨率适配 安装npm lib-flexible --save 在main.js中引入 import './utils/lib-flexible/flexible' 因为需要修改flexible.js的代码,所以把node-modules的依赖复制到utils文件夹 function ...
  • PC端页面适应不同分辨率的方法

    万次阅读 多人点赞 2018-07-30 10:44:30
    上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率。 通过师傅的指导和自己查阅资料,最终成功适配不同分辨率,完成了这个项目。 现在回头...
  • 字体随分辨率变化屏幕字体适应 首先了解下 rem与px的转换哈 rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。 我们知道,浏览器默认的...
  • pc端分辨率适配

    2021-12-29 11:14:03
    如果页面是版心布局,有一个固定的宽度,则在各种分辨率下不会有太大的差异,反之则会有较大的差异。
  • 主要应用:lib-flexible和postcss-px2rem-exclude 第一部分:项目中全局引入lib-flexible 1.项目全局中安装lib-flexible npm install lib-flexible --save 2、在项目的入口main.js文件中引入lib-flexible ...
  • 该布局可实现效果: 浏览器窗口缩放,页面所有元素会自动跟随缩放(注意:chrome浏览器默认最小...(份数并不固定,这里是默认按1920px宽的分辨率进行设定)。 默认屏幕宽为1920px,屏幕分成24份,那么每份尺寸为
  • PC端兼容各种分辨率的简便方法 小程序、前端交流群:609690978 PS:此方法需使用到less或者scss的@变量来支持 以设计图 1920 宽度为例: css中存在一种叫vw的单位,是针对浏览器宽度为基础的百分比单位,与%的区别...
  • Vue页面自适应pc端不同分辨率尺寸方法
  • PC端分辨率适配

    千次阅读 2020-12-22 11:21:13
    最近在写一个PC端的运动页面,行将落成的时刻,增加了个需求,想让页面适配差别的区分率,既然提出了如许的需求,那末我们就要去只管满足。之前一直写的是牢固版心,然后在将容器居中,如许写的话,就致使页面在低...
  • 作者文章连接:https://www.jianshu.com/p/4850a7b22228
  • vue 如何PC端不同屏幕大小分辨率自适应

    千次阅读 多人点赞 2021-03-12 15:14:29
    如果你做了一个vue的pc端项目,但是需要适应不同分辨率和屏幕大小,你会发现在1080p*1920下开发的页面,把分辨率切换到1366或者其他的时候,页面会变得非常丑,字体变得超级大,还会换行等等,也许有很多公司都...
  • 核心思路 Vue项目使用 vue-cli 脚手架创建 使用阿里可伸缩布局方案 lib-flexible 依赖 使用 px2rem-loader 将px转化为rem 添加依赖 npm install lib-flexible --save //阿里可伸缩布局方案依赖 ...
  • 简单的几步~~~ 这里讲二种方式:1.借助插件实现,2.利用css3媒体查询实现 方法一:下载两个插件 1.安装lib-flexible和px2rem-loader 两个插件 ...npm i lib-flexible -S //生成 ...3.找到文件 node_...
  • 【项目实战经验】vuecli3,实现PC端分辨率适配 1.安装需要响应的包 npm i lib-flexible -S npm i px2rem-loader -D npm i postcss-px2rem -D 安装这三个包。 安装px2rem后,再使用px上有些不同,大家可以参考px2rem...
  • 关于PC端自适应分辨率的问题。

    千次阅读 2020-03-30 15:42:47
    根据不同分辨率,加载不同的CSS样式文件 这个方法的思路是,分别针对800、1280、1440、1600、1920等分辨率,创建不同的css文件。然后在各种分辨率下,写css样式表。 可能你会感觉针对一个页面,要写这么多不同的...
  • vue的PC端和移动端分辨率适配

    千次阅读 2021-12-07 15:04:42
    使用lib-flexible和px2rem实现移动端和PC端界面适配 注释:lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题、现已不被推荐(因为目前比较主流的适配方案是使用vw和vh的方式进行适配)、lib-flexble是根据...
  • 一、依赖 项目基础配置使用 vue-cli3 生成; 自适应方案核心: 阿里可伸缩布局方案 lib-flexible;... 缩放是跟据横向分辨率来处理的,若有纵向的需要(如:background),可对其高度设置百分比或用vh单位;
  • 上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率。通过师傅的指导和自己查阅资料,最终成功适配不同分辨率,完成了这个项目。现在回头再来看...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,927
精华内容 3,570
关键字:

pc端适配不同分辨率