和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的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*/ } |