思路

三个要点：

  1. 媒体查询
  2. meta标签
  3. 注意移动端交互（没有hover；有touch没有click）

tip：

  • 对于差异较大的样式布局，建议PC端和移动端各做一套，即不做响应式，0适配
  • 对于简单布局（如新闻网站和文档网站）直接使用三要点，先基于一个尺寸的屏幕做设计，然后其他屏幕等比缩放
  • 宽度单位优先于高度，因为高度可以上下滑动来妥协

px、em、rem、vw、%、vw的区别

  • px：固定单位，其他几种都是相对单位。
  • em：相对于当前元素的字体大小的倍数（1em == 原font-size）
  • rem：相对于根元素（固定为html）的字体大小的倍数（1rem ==html 的 原font-size）
  • 1vw 代表浏览器视口宽度的1%。
  • 1% 对不同属性有不同的含义。 font-size: 200% 和font-size: 2em 一样，表示字体大小是默认（继承自父亲）字体大小的2倍。 line-height: 200% 表示行高是自己字体大小的2倍。 width: 100%表示自己content的宽度等于父亲content宽度的1倍。
  • vw是相对单位，1vw表示屏幕宽度的1%，100vw将整个屏幕宽度分为100份。

tip：
网页默认的字体大小是16px
chrome浏览器下文字最小是12px，设置低于12px的值最终也会展示12px
rem和em区别：rem是根元素的font-size；em是自己的font-size

vw + rem方案

  1. /*100vw 表示 页面完整的有效宽度pageWith*/
  2. html{
  3.   font-size:26.66667vw;/*基准，基于默认font-size为16px的换算*/
  4. }
  6. /*思路：html的font-size用vw表示；基于此其他元素大小用rem换算*/
  7. div{
  8.   font-size:0.16rem;/*   16px/100px == 0.16rem   */
  9. }
  11. /*100vw 375px*/
  12. /*a     100px*/
  1. 设计图的宽度 = 设备宽度
  2. 假如 设计图的宽度为 375px，当然可以是其他的，这里是一个假如，如果是640，750就把375换成对应的数值按照以下方法换算就行就行
  3. 因为
  4.     375px = 100vw
  5. 那么
  6.     1px = 100 / 375 vw = 0.26666666666666666vw（约等于）
  8. 为了方便计算，放大一百倍，精确到6位，只能下取舍，因为上取舍，计算宽度的时候会大于页面宽度，从而出现滚动条
  9. 故：
  10.     100px = 26.666666vw（约等于）
  12. 又因为给 html 标签设置 font-size 为 26.666666vw （约等于）
  14. 1rem为font-size的大小
  16. 所以：
  17.     1rem = 100px
  18.     0.2rem = 20px
  19. 也就是说：
  20.     设计图上的 12px 换算成rem就是0.12rem，20px就写成0.2rem即可

思路：只需要在html的font-size预先设置基准值，后续只要针对不同元素的尺寸做设置即可，若页面resize则自动响应，实现等比例缩放
缺点：浏览器兼容性差，IE9 以下不支持，但现代浏览器，特别是移动端，基本都支持
参考比例：
image.png

使用插件postcss-px-to-viewpor

postcss-px-to-viewpor，将代码中px单位转为rm、rem、vw等视口单位，一份配置文件完美解决适配问题。
npm install postcss-px-to-viewport --save-dev

  1. > node_modules
  2. > public
  3. > src
  4. postcss.config.js
  1. module.exports = {
  2.   plugins: {
  3.     'postcss-px-to-viewport': {
  4.       unitToConvert: 'px', // 需要转换的单位，默认为"px"
  5.       viewportWidth: 1920, // 设计稿的视口宽度
  6.       unitPrecision: 5, // 单位转换后保留的精度
  7.       propList: ['*'], // 能转化为vw的属性列表
  8.       viewportUnit: 'vw', // 希望使用的视口单位
  9.       fontViewportUnit: 'vw', // 字体使用的视口单位
  10.       selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
  11.       minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
  12.       mediaQuery: false, // 媒体查询里的单位是否需要转换单位
  13.       replace: true, //  是否直接更换属性值，而不添加备用属性
  14.       exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
  15.       include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
  16.       landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
  17.       landscapeUnit: 'vw', // 横屏时使用的单位
  18.       landscapeWidth: 1920 // 横屏时使用的视口宽度
  19.     }
  20.   }
  21. }