界面响应式方案

响应式

1. 只用media-query

一般以768px 1024为分界线，单位全用px;

@mixin mediaS {
  @media (max-width: 768px) {
    @content;
  }
}

@mixin mediaL {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin mediaXL {
  @media (min-width: 1400px) {
    @content;
  }
}

2. media-query 配合设置根元素font-size(rem) 无js

3.js监听设备宽度，加载不同的css的url, css使用px或者rem;

其实这种方法只有一个好处： 就是减少css引用的请求。

移动端自适应

1.flexible.js

flexible.js

2.meta标签中设置固定width

<meta name="viewport" 
content="width=640,user-scalable=no">

相关链接 然后可以在css中写固定px，不同尺寸的移动设备会自动调整界面。

3.rem.js

利用js判断window的宽度，来设置html根元素的font-size。

4.vw

这种一般基于less scss封装函数

@use 'sass:math';

@function vw($px) {
  @return math.div($px, 375) * 100vmin;
}

@function vwPC($px) {
  @return math.div($px, 1080) * 100vmin;
}