iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
2
Modern Web

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

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

  • 分享至 

  • xImage
  •  

※ 今天的內容

一、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

三、總結

Breakpoint CSS Class 和 Platform CSS Class 是除了Layout系統之外
我很喜歡Quasar的一大特色
提供的Flex Grid 和 Media Query之外的解決方案
適合在多尺寸、多裝置的網頁切版需求較重的專案使用。

如果不是使用Quasar
多裝置的偵測原理和替代方案,可以參考延伸閱讀。

四、延伸閱讀

What is the best way to detect a mobile device?
mobile-detect.js


上一篇
第二十一天:UI切版 & 元件-BreakPoint、常用的Flex css
下一篇
第二十三天:UI切版 & 元件-區塊型式、定位、內外距、字型格式
系列文
Quasar CLI Framework 邪教:整合分散的前端技術和工具、常見的開發需求31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言