vue的自定义布局（rem）

目录

1. px与视口
2. %
3. 媒体查询
4. rem
5. vm/vh

1. rem单位

首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为12px，所以：

1 rem = 12px

为了计算方便，通常可以将html的font-size设置成：

html{ font-size: 67.5% }

这种情况下：

1 rem = 10px

2.通过rem来实现响应式布局

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。

3. rem2px和px2rem

如果在响应式布局中使用rem单位，那么存在一个单位换算的问题，rem2px表示从rem换算成px，这个就不说了，只要rem乘以相应的font-size中的大小，就能换算成px。更多的应用是px2rem，表示的是从px转化为rem。

比如给定的视觉稿为750px（物理像素），如果我们要将所有的布局单位都用rem来表示

一种比较笨的办法就是对所有的height和width等元素，乘以相应的比例，现将视觉稿换算成rem单位，然后一个个的用rem来表示。

另一种比较方便的解决方法就是，在css中我们还是用px来表示元素的大小，最后编写完css代码之后，将css文件中的所有px单位，转化成rem单位。

px2rem的原理也很简单，重点在于预处理以px为单位的css文件，处理后将所有的px变成rem单位。可以通过两种方式来实现：

<!--1） webpack loader的形式：-->

npm install px2rem-loader

<!--在webpack的配置文件中：-->

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUni: 75,
          remPrecision: 8
        }
      }]
    }]
  }
}

<!--2）webpack中使用postcss plugin-->

npm install postcss-loader

<!--在webpack的plugin中:-->

var px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}

4.vue 中的 rem 布局

1）vue2 中

1. Vue-cli2.x中的用法

   1)下载lib-flexible

npm i lib-flexible --save

2)引入lib-flexible

<!--在main.js中引入lib-flexible-->
import 'lib-flexible/flexible'

3)设置meta标签

<!--通过meta标签，设置设备宽度以及缩放比例-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4)安装px2rem-loader

npm install px2rem-loader --save-dev

5.配置px2rem-loader

<!--在build文件中找到util.js，将px2rem-loader添加到cssLoaders中-->
const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
}
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
}

<!--在generateLoaders方法中添加px2remLoader-->

// generate loader string to be used with extract text plugin

  function generateLoaders (loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

var loaders = [cssLoader,px2remLoader]

if (loader) {
  loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
  })
}

2）vue3 中的用法

lib-flexible：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 

1)安装lib-flexible

yarn add lib-flexible 

2)引入lib-flexible

<!--在main.js中引入lib-flexible-->
import 'lib-flexible/flexible'

pxtorem：将项目中css的px转成rem单位，免去计算烦恼 
1）安装postcss-pxtorem 

yarn add postcss-pxtorem 

2) 配置postcss-pxtorem 

<!--package.json内，在postcss内添加-->
"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75 // 设计稿宽度的1/10,
        "propList":['*'],
        // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
     }
    }
  }

1、pxtorem中，对于想忽略的px写成大写即可，诸如 border:1PX solid #fff。
2、也可以选择postcss-px2rem，我更喜欢pxtorem的忽略方式，方便我vscode的beautify自动格式化代码。
3. rem 布局的缺点
通过rem单位，可以实现响应式的布局，特别是引入相应的postcss相关插件，免去了设计稿中的px到rem的计算。
rem单位在国外的一些网站也有使用，这里所说的rem来实现布局的缺点，或者说是小缺陷是：

在响应式布局中，必须通过js来动态控制根元素font-size的大小。
也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。