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

2019-05-2419:17:38WEB前端开发Comments3,125 views字数 1723阅读模式

和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6:    375px*667px  实际像素:750px*1334px)如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜,正常人都知道那是不对的,我在做的时候有两种解决办法:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

一、UI设计尺寸定基数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

可以和UI沟通在给你的标记尺寸大小时候,让她基于一个数值,一般是16px。给你标注的时候选择保留两个小数,给你标注成px或者rem。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

开发者这时候需要配置开发者工具了,我使用的是 Visual Studio Code,需要安装插件cssrem,安装完成时候再次重启,可以看到px和rem的转换。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

二、使用lib-flexible适配UI尺寸文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

使用lib-flexible.js需要在开始引入可以npm引入或者html引入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

html引入:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

引入地址:https://github.com/821945617/tools下载lib-flexible.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

使用这种引入方式需要计算px与rem的兑换公式,如果一个div的宽度在iPone6设计稿上面为200px,那么750/10 = 75 ,实际rem就是200/75 = 2.666667rem,即这个公式是:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

需转换的px值 / 设计稿宽度px值 * 10文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

npm引入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

1
2
3
npm install lib-flexible --save
import "lib-flexible" // 在main.js引入

需要安装px转rem插件安装px2rem-loader自动将px转换为rem文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

1
npm install px2rem-loader --save-dev

接下来就是配置px2rem文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

在build/uitils.js中添加配置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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方法配置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

1
2
3
4
5
6
7
8
9
10
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有些变化,主要有三个方面需要注意:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

1、直接写px,编译后会直接转化成rem —- 除开下面两种情况,其他长度用这个文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

2、在px后面添加/no/,不会转化px,会原样输出。 — 一般border需用这个文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

3、在px后面添加/px/,会根据dpr的不同,生成三套代码。—- 一般字体需用这个文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

示例代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html

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

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12868.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/12868.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定