当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用lib-flexible.js适配移动端UI设计750px设计图

使用lib-flexible.js适配移动端UI设计750px设计图

2019年05月25日  | 移动技术网IT编程  | 我要评论

   最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况，我们的ui设计是使用的ipone6的，（iphone6:    375px*667px  实际像素：750px*1334px）如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜，正常人都知道那是不对的，我在做的时候有两种解决办法：

　　一、ui设计尺寸定基数

　　　　可以和ui沟通在给你的标记尺寸大小时候，让她基于一个数值，一般是16px。给你标注的时候选择保留两个小数，给你标注成px或者rem。

　　　　开发者这时候需要配置开发者工具了，我使用的是 visual studio code，需要,安装完成时候再次重启，可以看到px和rem的转换。

      二、使用lib-flexible适配ui尺寸

　　　　使用lib-flexible.js需要在开始引入可以npm引入或者html引入。

  　　　　html引入：

　　　　　　引入地址：https://github.com/821945617/tools下载lib-flexible.js

　　　　　　使用这种引入方式需要计算px与rem的兑换公式，如果一个div的宽度在ipone6设计稿上面为200px，那么750/10 = 75 ，实际rem就是200/75 = 2.666667rem,即这个公式是：

　　　　　　　　需转换的px值 / 设计稿宽度px值 * 10     

　　　　npm引入

npm install lib-flexible --save

import "lib-flexible" // 在main.js引入

　　　　　　需要安装px转rem插件安装px2rem-loader自动将px转换为rem 

npm install px2rem-loader --save-dev

　　　　接下来就是配置px2rem

　　　　   在build/uitils.js中添加配置

exports.cssloaders = function (options) {
  options = options || {}

  const cssloader = {
    loader: 'css-loader',
    options: {
      sourcemap: options.sourcemap,
      importloader: 2 // 在css-loader前引用的loader的数目，默认为0，如果不加,那么@important的外部文件不能正常转换，如果还不行，试着调大字数
    }
  }
  const px2remloader = {
    loader: 'px2rem-loader',
    options: {
      emunit: 75 // 设计稿的1/10
    }
  }

　　　在下面的generateloaders方法配置：

  function generateloaders (loader, loaderoptions) {
    const loaders = options.usepostcss ? [cssloader, postcssloader, px2remloader] : [cssloader, px2remloader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: object.assign({}, loaderoptions, {
          sourcemap: options.sourcemap
        })
      })
    }

安装px2rem后使用px有些变化，主要有三个方面需要注意：

　　1、直接写px，编译后会直接转化成rem —- 除开下面两种情况，其他长度用这个

　　2、在px后面添加/no/，不会转化px，会原样输出。 — 一般border需用这个

　　3、在px后面添加/px/,会根据dpr的不同，生成三套代码。—- 一般字体需用这个

　　示例代码

　　

.div{
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

这样基本配置就完成了，重启项目就可以使用lib-flexible+rem编写移动端页面了

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网