響應式布局新方案：融合響應式設計，開源 React 元件

項目介紹

react-ui-mode-cc

是融合響應式設計的 React 版實作，基于 create-react-library[1]建構，使用 雲開發 CloudBase Framework[2]部署到騰訊雲靜态網站托管。

可以通路 示例網站[3]來檢視效果，源碼細節在 https://github.com/shenghanqin/react-address-picker-cc[4]。

融合響應式設計，利用 JavaScript 判斷 和 CSS 來進行媒體查詢，是響應式設計與自适應設計結合的方案。

• 自适應設計：根據裝置特點，使用 JavaScript 來區分 PC UI 和 Mobile UI
• 響應式設計：在需要調整出更好的 UI 時，可以加入一些 CSS 媒體查詢的斷點，比如常見的大屏顯示效果

完整介紹文章為：《 響應式布局新方案——融合響應式設計[5]》

文章内示例源碼與

react-ui-mode-cc

會有部分不同，

react-ui-mode-cc

會不斷更新

安裝方法

# npm 安裝
npm install @xiaoxili/react-ui-mode-cc --save
# yarn 安裝
yarn add @xiaoxili/react-ui-mode-cc
           

複制

調用方法

// 引入 withUiMode
import withUiMode from '@xiaoxili/react-ui-mode-cc'
// 引入 CSS 預設變量，可選項
import '@xiaoxili/react-ui-mode-cc/dist/index.css'
interface Props {
  isPCMode?: boolean
  uiMode?: string
}
// 裝飾器的調用方式
@withUiMode({
  // 區分模式的寬度
  widthMode: 1000,
  // iPad 微信恒定為 Mobile UI
  isPadWechatMobile: true
})
export default class App extends React.Component<Props, {}> {
  render() {
    const { isPCMode, uiMode } = this.props
    console.log('uiMode :>> ', isPCMode, uiMode);
    return (
      <div className={`page-container ${isPCMode ? 'page-mode-pc' : 'page-mode-mobile'}`}>
        <div>
          <h2>目前螢幕模式</h2>
          {uiMode} ui
        </div>
        <div>
          <h2>isPCMode：</h2>
          {isPCMode ? 'true' : 'false'}
        </div>
      </div>
    )
  }
}
           

複制

// 高階元件的方式調用
class App extends React.Component {}
export default withUiMode({
  // 區分模式的寬度
  widthMode: 1000,
  // iPad 微信恒定為 Mobile UI
  isPadWechatMobile: true
})(App)
           

複制

Options 選項

基本原理：JavaScript 橫豎屏判斷加裝置寬度

屬性名	類型	預設值	描述
widthMode	Number	1000	區分模式的寬度
isPadWechatMobile	Boolean	false	iPad 微信是否恒定為 Mobile UI

CSS 變量 —— CSS 媒體查詢

基本原理：在不同的 UI 模式内的變量設定

預處理的 CSS 變量示例

可以使用 Stylus、LESS、SCSS 來設定

// Mobile 模式下頁面最大寬
$xxl-max-body-width: 768px;
// Mobile 模式下的内容寬度
$xxl-max-body-width-center: ($xxl-max-body-width - 40px);

// PC 模式下小屏的寬度斷點
$xxl-page-min-width: 1000px;
// PC 小屏模式下的内容寬度
$xxl-page-min-width-center: ($xxl-page-min-width - 40px);
// PC 模式下大屏的寬度斷點
$xxl-page-max-width: 1200px;
// PC 大屏模式下的内容寬度
$xxl-page-max-width-center: ($xxl-page-max-width - 40px);
           

複制

重要版本更新記錄

• v0.1.1
  • 将橫豎屏切換監聽改為

    window.matchMedia('(orientation: portrait)')

    ，并針對 iPad 上進行多次測試
  • 删除

    constants.css

    調用
• v0.1.0 首次上線，支援設定子產品寬度、iPad 微信是否恒定為 Mobile UI

原了解析

依據裝置橫豎屏及寬高特點

裝置	網頁寬高	UI 模式
手機 iPhone11 pro max	414x896	Mobile
iPad mini 7.9 寸	1024x768	橫屏 PC、豎屏 Mobile
ipad 10.2 寸	1080x810	橫屏 PC、豎屏 Mobile
iPad Air 10.5 寸	1112 x 834	橫屏 PC、豎屏 Mobile
iPad Pro 11 寸	1194x834	橫屏 PC、豎屏 Mobile
iPad Pro 12.9 寸	1366x1024	橫屏 PC、豎屏 Mobile
CCtalk PC 用戶端	1070x650	橫屏 PC
筆記本電腦、2k、4k	1280x800	橫屏 PC

效果圖

區分 Mobile UI 和 PC UI 的完整的判斷邏輯如下：

1. 在 iPad 微信 App 上可設定強制顯示 Mobile 效果
2. 筆記本電腦，不支援

   onorientationchange

   橫豎屏切換的，就認定為

   PC

   • 不使用

     onRisize

     來監聽網頁的寬高，因為性能消耗大
   • 并且當浏覽器拖動小了，支援左右滾動
3. 若

   window.screen.width, window.screen.height

   的最大值也比

   widthMode

   寬度斷點大，那就可以認為是

   PC

   ，如 iPad Pro 12.9 寸。
4. 若

   window.screen.width, window.screen.height

   的最大值也比

   widthMode

   寬度斷點還小，那就可以認為是

   Mobile

5. 進入頁面時，豎屏時以

   window.screen.width, window.screen.height

   中數值小的那個來判斷，橫屏中以

   window.screen.width, window.screen.height

   數值大的來判斷，當寬度大于

   1000px

   時認為是

   PC

   ，寬度小于

   1000px

   時，認定為

   Mobile

   。
6. 橫豎屏切換時，重複第 5 步的判斷
   • 方案一：監聽

     window.matchMedia('(orientation: portrait)')

     ，目前測試這個方案比較理想
   • 方案二：監聽

     onorientationchange

     及

     window.orientation

備注：

• iPad 微信 app 橫屏“掃一掃”，會以“左聊天清單、右側網頁”的布局，此時寬度比預期的小

  320px

  ，應當認為是

  mobile

  。
• 在橫豎屏切換後，需要加

  300ms

  延時，之後擷取的

  innerWidth

  和

  innerHeight

  才是準确的。

源碼位址

https://github.com/shenghanqin/react-ui-mode-cc/blob/master/src/index.tsx

UI 模式下進行增強的響應式布局

在區分好 PC UI 和 Mobile UI 的判斷設定後，我們還要關心的是在一些常見的裝置上的顯示效果，比如 iPad 橫豎屏、大屏顯示器。

Mobile UI 效果中的優化

在 Mobile UI 模式下，iPad Mini 豎屏的為 768px，此時顯示的平鋪拉伸版效果

是以 Mobile UI 就有了如下的 CSS 最大寬的設定：

// Mobile 模式下頁面最大寬
$max-body-width = 768px
// Mobile 模式下的内容寬度
$max-body-width-center = $max-body-width - 40px
           

複制

PC UI 效果中的優化

在上面的 PC UI 的判定中，我們是以 1000px 作為判斷區間的，那麼在這個寬度下，推薦設計師以 960px 為設計寬度，這樣兩側就各有 32 px 的留白，以此來增加整個頁面的呼吸感。

那麼，市面上絕大部分的裝置其實是比 1280px 還要大的。此時，可以選擇以 1200px 作為更大屏的媒體查詢斷點。也就是說，我這裡運用了響應式設計中的 CSS 媒體查詢。

為何不選用 1400px 呢，因為在 CCtalk 上課的網師、學生所使用的主流裝置分辨率寬度還是在 1280px、1366px、1440px 這幾個區間的。

是以，有如下 PC UI 的 CSS 最大寬設定：

// PC 模式下小屏的寬度斷點
$page-min-width = 1000px
// 小屏模式下的内容寬度
$page-min-width-center = $page-min-width - 40px
// PC 模式下大屏的寬度斷點
$page-max-width = 1200px
// 大屏模式下的内容寬度
$page-max-width-center = $page-max-width - 40px
           

複制

License

MIT © https://github.com/shenghanqin/[6]

參考資料

[1]

create-react-library: https://github.com/transitive-bullshit/create-react-library

[2]

雲開發 CloudBase Framework: https://github.com/TencentCloudBase/cloudbase-framework

[3]

示例網站: https://www.xiaoxili.com/packages/react-ui-mode-cc

[4]

https://github.com/shenghanqin/react-address-picker-cc: https://github.com/shenghanqin/react-address-picker-cc

[5]

響應式布局新方案——融合響應式設計: https://www.xiaoxili.com/blog/posts/fusion-web-design.html

[6]

https://github.com/shenghanqin/: https://github.com/https://github.com/shenghanqin/