欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

兼容pc和移动端

程序员文章站 2022-03-11 15:37:01
能用 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)...

能用 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
// ...
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
// ...

 

@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;
 //根据不同设备的屏幕宽度,定义<html>的基准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
// ...
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
// ...

本文地址:https://blog.csdn.net/mChales_Liu/article/details/111874736

相关标签: # JavaScript 兼容