常用插件：flexible.js pxtorem

响应式 & 自适应

响应式布局：媒体查询(media query)

媒体查询就是对设备按照某些条件进行查询，使符合查询条件的设备显示对应的样式，从而达到不同设备显示不同样式的效果。
• 响应式页面的本质就是写了两个页面的内容（移动端+PC 端）在同一个页面中，然后根据查询条件来切换该用哪个页面。
• 如果是同一个页面内之间的状态，用 JS 来切换状态
如果是不同屏幕之间的状态，用媒体查询来切换状态
• 适配移动端用 媒体查询 & meta viewport
• 移动端页面的交互方式和 PC 端页面不同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
  @media (max-width: 320px){ /*0~320*/
      body{
          background: pink;
      }
   }
   @media (min-width: 321px) and (max-width: 375px){ /*321~768*/
      body{
          background: red;
      }
   }
   @media (min-width: 376px) and (max-width: 425px){ /*376~425*/
      body{
          background: yellow;
      }
   }
   @media (min-width: 426px) and (max-width: 768px){ /*426~768*/
      body{
          background: blue;
      }
   }
   @media (min-width: 769px){ /*769~+∞*/
      body{
          background: green;
      }
   }
</style>

自适应：盒模型，图片，字体

盒模型：

  • flex 弹性布局 & 浮动+百分比布局
  • bootstarp element vant antd…栅栏式布局

图片：

重点：避免图片失帧
方式一：

1
2
3
4
5
6
img  {
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: auto;
}

方式二：

1
2
3
4
5
img  {
      width:100%;
      heigth:auto;
      display: block;
}

字体：

字体尺寸的单位：px pt rem em

px:

相对长度单位。像素（Pixels）。像素 px 是相对于显示器屏幕分辨率而言的。
px 不会因为其它元素的尺寸变化而变化
px 特点：比较稳定和精确，但在浏览器放大缩小会出现页面混乱。

pt:

点（Points），绝对长度单位。
印刷业上常使用的单位，磅的意思，一般用于页面打印排版。
不知道经常做设计的同学知不知道 zeplin 这个网站，它用的像素单位都是 pt。

rem:

相对长度单位。相对于根元素(即 html 元素)font-size 计算值的倍数。是 CSS3 新增的一个相对单位（root em=>rem）;
rem 可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

em:

相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em 特点：
（1）em 的值并不是固定的
（2）em 会继承父级元素的字体大小
使用 em 的注意点：

  1. html 选择器中声明 font-size=62.5%；
  2. 将你的原来的 px 数值除以 10，然后换上 em 作为单位；
  3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。
字号 px em Percent Points
八号 6px 0.375em 37.5% 5pt
七号 7px 0.4375em 43.75% 5.5pt
小六 8px 0.5em 50% 6.5pt
9px 0.55em 55% 7pt
六号 10px 0.625em 62.5% 7.5pt
11px 0.7em 70% 8pt
小五 12px 0.75em 75% 9pt
13px 0.8em 80% 10pt
五号 14px 0.875em 87.5% 10.5pt
15px 0.95em 95% 11pt
小四 16px 1em 10% 12pt
17px 1.05em 105% 13pt
18px 1.125em 112.5% 13.5pt
四号 19px 1.2em 120% 14pt
20px 1.25em 125% 14.5pt
小三 21px 1.3em 130% 15pt
三号 22px 1.4em 140% 16pt
23px 1.45em 145% 17pt
小二 24px 1.5em 150% 18pt

veu - rem 适配：

公司设计稿：750 尺寸 是 iPhone6/7/8 屏幕宽度的 2 倍视图

方式一：
第一步，先用 vue-cli 快速构建出一个项目，然后，安装

  • postcss
  • postcss-pxtorem px 转 rem
  • postcss-loader 样式解析
  • postcss-import css 中引入 css
  • postcss-url；
1
npm i --save postcss postcss-pxtorem postcss-loader postcss-import postcss-url

第二步，在项目根目录下添加.postcssrc.js 文件，在里面写上

1
2
3
4
5
6
7
8
9
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 32, //根目录的字体大小是32px
      propList: ["*"],
      minPixelValue: 2, //最小转换单位是2px
    },
  },
};

第三步，动态设置根字体大小！一段简单的 js 插入在 head 里面；

1
2
3
4
5
6
7
8
9
10
<script>
  (function() {
    function autoRootFontSize() {
        document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
          // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
    }
    window.addEventListener('resize', autoRootFontSize);
    autoRootFontSize();
})();
</script>