第二十二天：UI切版 & 元件-裝置類型與大小偵測 (Body CSS Class)

第 12 屆 iThome 鐵人賽

DAY 22

Modern Web

Quasar CLI Framework 邪教：整合分散的前端技術和工具、常見的開發需求系列第 22 篇

12th鐵人賽

通靈亡

2020-10-07 22:13:40

1680 瀏覽

分享至

※ 今天的內容

一、Breakpoint CSS Class
二、Platform CSS Class
三、總結
四、延伸閱讀

一、Breakpoint CSS Class

昨天的內容介紹了兩種撰寫RWD切版的方式:
1.使用 Media Query + BreakPoint Sass/Stylus Variable
2.使用 Flex Grid

今天第一個要介紹的，是Quasar Framework 強大的BreakPoint CSS Class
偵測你當前的瀏覽器解析度寬度，在Body加上相對應的CSS Class，表示目前落在哪一種裝置大小的Breakpoint
包括：screen--xs、screen--sm、screen--md、screen--lg、screen--xl

The Quasar Screen plugin allows you to have a dynamic and responsive UI when dealing with your Javascript code.
https://quasar.dev/options/screen-plugin#Body-classes

<body class="screen--breakpoint"></body>

示意結果如下：

這時你可以利用這些BreakPoint CSS Class當作CSS選擇器的規則使用，撰寫CSS樣式
例如：設定在xs和sm的尺寸，.my-div class 分別呈現的字型顏色：

body.screen--sm {
  .my-div {
    color: red;
  }
}

body.screen--md {
  .my-div {
    color: green;
  }
}

設定的方式很簡單，只要在quasar.config.js > framework > config設定，打開screen plugin的body class即可使用

// file: /quasar.conf.js
// with Quasar v1.5.3+

framework: {
  config: {
    screen: {
      bodyClasses: true // <<< add this
    }
  }
}

不過根據官方文件的說明，除非必要，盡量使用CSS Class 或者 Media Query，優先考慮網頁效能

When possible, it is recommended to use the responsive CSS classes instead, for performance reasons.

以下是不需要額外設定即可使用的CSS class
用來指定在什麼breakpoint範圍尺寸才會顯示

css	Description
xs	Display only on extra small windows
sm	Display only on small windows
md	Display only on medium-sized windows
lg	Display only on large windows
xl	Display only on extra large windows

此外，官方文件有提到
我們可以透過this.$q.screen.lt.\<breakpoint>
取得當前瀏覽器解析度是不是在指定的尺寸

二、Platform CSS Class

另一個要介紹的，是Quasar Framework 強大的Platform CSS Class
相較於Breakpoint CSS Class，不需要做額外的設定就會有作用

css	Description
desktop-only	Visible only on desktop
mobile-only	Visible only on mobile
native-mobile-only	Visible only on Cordova/Capacitor
cordova-only	Visible only on Cordova wrapped Apps
capacitor-only	Visible only on Cordova wrapped Apps
electron-only	Visible only on Electron wrapped Apps
touch-only	Visible only on touch capable platforms
platform-ios-only	Visible only on an iOS platform
platform-android-only	Visible only on an Android platform
within-iframe-only	Visible only when entire website is under an IFRAME tag

示意結果如下，只有在行動裝置才會顯示左上角側邊欄的按鈕：

此外，官方文件寫到
我們可以透過js變數(this.$q.platform.is)取得當前裝置的相關資訊
當中包含了以下的資訊：

{
  chrome: true,
  desktop: true,
  mac: true,
  name: "chrome",
  platform: "mac",
  version: "70.0.3538.110",
  versionNumber: 70,
  webkit: true
}

Platform.is by itself returns an object containing details about the current platform. For example when running Chrome on a MacOS desktop machine.
https://quasar.dev/options/platform-detection