兼容pc和移动端

能用 CSS 控制的尽量不要用 JavaScript 去实现。

所以，不推荐这样：

terminalType () {
  const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|
BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  return !!isMobile
}

上述代码中的 !!isMobile 等价于 isMobile ? true : false。

推荐使用 CSS 的媒体查询

 

@media标签+rem+viewport+less

为什么375的屏要用750的设计稿？

2倍图岂不是更高清吗。

实现：

// base.less
// 计算rem的基准字体
@base-font-size: 100px;
// UI设计图的分辨率宽度
@psd-width: 750px;
// 需要适配的屏幕宽度
@device-list: 320px, 360px, 375px, 412px, 480px, 640px, 720px, 768px, 1440px;
//设置数组的长度
@len:length(@device-list);
.adapterMixin(@index) when (@index <= @len){
  // 根据index获取对应的某个值 extract(数组名, 对应的序号)
  @media (min-width: extract(@device-list, @index)) {
    html {
      font-size: extract(@device-list, @index) / @psd-width * @base-font-size;
    }
  }
  .adapterMixin(@index - 1);
}

// index.html
// ...
    
// ...

 

@media标签+rem+viewport+scss

// base.scss
// 计算rem的基准字体
$rem-base-font-size: 100px;
// UI设计图的分辨率宽度
$UI-width: 750px;
// 需要适配的屏幕宽度
$device-widths: 240px, 320px, 360px, 375px, 384px, 411px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 980px, 1024px, 1080px, 1152px, 1366px, 1440px, 2160px;
 //根据不同设备的屏幕宽度，定义的基准font-size
@each $current-width in $device-widths {
  @media (min-width: $current-width) {
    html {
      font-size: $current-width * $rem-base-font-size/$UI-width;
    }
  }
}

// index.html
// ...
    
// ...