zoukankan      html  css  js  c++  java
  • vue 单页面应用 app自适应方案

     本文是使用淘宝的方案进行布局开发的,遇到的问题是会对app内使用的第三方插件,当页面进行缩放后,比如高德地图中的文字会显得过小,我使用的方法就是手动的动每一个尺寸进行手动的px 到 rem的替换,而不是用的px2remLoader,webpack中使用px2remLoader后会全局的对px进行转换,本人并未找到可以对指定的数据进行转换的参数,下面是我使用淘宝lib-flexible的整个流程。

    一、安装【lib-flexible】

    npm install lib-flexible --save
    

     并在main.js页面引入

    import 'lib-flexible';

    二、模板页面【index.html】

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">/*如果页面未引入第三方组件【比如地图组件】建议不写,让lib-flexible自动计算*/
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8     <title>document</title>
     9 </head>
    10 
    11 <body>
    12     <div id="app"></div>
    13     <!-- built files will be auto injected -->
    14 </body>
    15 
    16 </html>

    三、设计图上的尺寸手动转化为rem

     根据设计图尺寸我们可以将1rem设置为固定的PX数作为基准,可参考http://www.cnblogs.com/lyzg/p/5058356.html

     根据基准值我们再手动去计算,我这里用的是atom编辑器,px2rem-plus插件,可以自己设置基准值,然后它会自动帮你计算并进行注释

     顺便介绍个sublime text3 的一个叫CSSREM的插件,可快速将px转化为rem.这个插件是由@正霖编写.下载地址:https://github.com/flashlizi/cssrem .

    四、然后就可以愉快的开发了

     只是这个方法比较笨,如果px2remLoader可以自动设置注释只使注释的尺寸转换的话就会方便许多,也应该有其他的方法,希望以后能再学习

  • 相关阅读:
    吃饭吧唧嘴的童鞋看过来
    CUDA 6.5 && VS2013 && Win7:创建CUDA项目
    IDM下载工具
    virgo虚拟桌面
    北方民族大学计算机科学与工程学院研究生导师
    从图片加载纹理-使用glut工具
    OpenGL Vertex Array
    OpenGL顶点缓冲区对象(VBO)
    几何画板5.03
    VS(VisualStudio)中折叠代码、打开代码的快捷键
  • 原文地址:https://www.cnblogs.com/chentingjun/p/7576348.html
Copyright © 2011-2022 走看看