插槽 rem

普通插槽

父组件

子组件

具名插槽(有名字的插槽)

子组件

rem适配

• 1、rem与px 的换算
  计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;
  举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem
• 2、移动端自适应网页
  1.自适应: 当屏幕的像素变大的时候,字体和元素也响应变大
  2.什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
  3.代码如下

    
    
    
    
    



    
    

        内容
    

• 3、 postcss-pxtorem 像素自动转换成rem
  写px的时候能够主动转换成rem，使用 postcss-pxtorem就能实现
  1.安装postcss-pxtorem

npm i postcss-pxtorem --save-dev

2.项目根目录下的package.json，postcss的plugins里添加下面的代码

"postcss-pxtorem": {
        "rootValue": 100,
        "propList": [
          "*"
        ]
      }