一、Breakpoint CSS Class
二、Platform 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>
取得當前瀏覽器解析度是不是在指定的尺寸
另一個要介紹的,是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