下苦平臺碎片化已久。

在移動互聯網以前，開發者只需幸福的面對web。進入移動互聯網時代，iOS、Android、H5以及各種小程序快應用層出不窮，開發者再也幸福不起來。

• 學習n個技術
• 開發n個版本
• 各版迭代混亂，無法拉齊，用戶茫然、內部痛苦
• 開發測試成本n倍暴漲

結果就是工程師不停加班到頭禿，但產品的需求仍然做不完、老板的預算一直壓不下去，全都痛苦。

uni-app之前已經實現了手機端全覆蓋，支持iOS、Android、H5、微信小程序、阿里小程序、百度小程序、字節跳動小程序、QQ小程序、快應用、360小程序，并且在各端均有優異的運行性能。

從2.9版本起，uni-app 進一步提供了PC等寬屏的適配方案，完成了大統一。

開發者終于可以做到使用一個框架，一把擼掉所有項目。

不說虛的，先來個實際示例，大家直觀感受一下：

如下是基于uni-app的DCloud社區在mobile端的展示效果，列表、詳情分為兩個頁面，點擊列表中的帖子，打開詳情頁面：

如下是基于uni-app的DCloud社區同一套代碼，稍作配置后，在pc端的展示效果，列表、詳情在同一個頁面中左右分欄顯示，點擊左側列表中的帖子，刷新右側詳情窗口的內容，這個UI更適合pc寬屏，也更有pc桌面App的體驗。

怎么樣？有沒有被酷到？

下面我們具體來講講uni-app的pc寬屏適配方案，總的來說，包括三個方面：

• 窗體級適配：leftwindow、rightwindow、topwindow等分欄
• 組件級適配：match-media組件
• rpx的寬屏響應

1. 窗體級適配：leftwindow分欄

手機屏幕和PC顯示器的設計不同。為了方便手持及接聽電話，大多手機的設備高度大于設備寬度（即為窄屏設計），故mobile App 多為豎屏/窄屏顯示的UI。

而pc顯示器多為寬屏設計，即設備寬度大于設備高度，在pc上的桌面應用，很多會采用左右分欄的UI設計。

uni-app以目前手機屏幕為主窗體（window），在左/右/上三個方向，新擴展 leftWindow、rightWindow、topWindow三個窗體，這三個窗體可設定在屏幕寬度大于某一閥值時自動出現（展現分欄的寬屏設計），屏幕寬度小于某一閥值后自動消失（恢復單窗口的窄屏設計）。

uni-app主窗體和擴展的三個窗體各自獨立，支持互相通信，點擊鏈接、切換頁面時支持在相應的窗體內刷新，而不是整屏刷新。

我們以本文開頭的DCloud社區為例，講解如何在uni-app中快捷實現寬屏適配。

我們將社區的列表頁作為主窗體，將詳情內容擴展到rightWindow中，示意如下：

接下來分步說明，如何在uni-app項目中完成分欄實現。

step 1： 新建right-window.vue展現帖子詳情

當然，rightWindow無需重寫新聞詳情頁面，是可復用原有代碼的，支持把已有詳情頁面當組件放到 rightWindow 頁面中，如下：

<!-- responsive/right-window.vue -->
<template>
  <view>
    <!-- 將原來的詳情頁（/pages/detail/detail.vue），作為一個組件(pages-detail-detail)使用 -->
    <pages-detail-detail ref="detailPage"></pages-detail-detail>
  </view>
</template>

<script>
  export default {
    created(e) {
      //監聽自定義事件，該事件由左側列表頁的點擊觸發
      uni.$on('updateDetail', (e)=> {
        // 執行 detailPage組件，即：/pages/detail/detail.vue 頁面的load方法
        this.$refs.detailPage.load(e.detail);
      })
    }
  }
</script>
復制代碼

step 2： 在列表頁面，處理點擊列表后與rightWindow交互通信的邏輯。

// 列表頁的改造
goDetail(detail) {
    if (this._isWidescreen) { 
        //若為寬屏，則觸發右側分欄詳情頁的自定義事件，通知右側窗體刷新新聞詳情
        uni.$emit('updateDetail', {
            detail: encodeURIComponent(JSON.stringify(detail))
        })
    } else { 
        // 若為窄評，則打開新窗體，在新窗體打開詳情頁面
        uni.navigateTo({
            url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))
        });
    }
},

復制代碼

step 3： 在pages.json中注冊rightWindow，如下：

{
  "rightWindow": {
    "path": "responsive/right-window.vue", // 指定 rightWindow 頁面文件
    "style": {
      "width": "calc(100vw - 400px)" // 頁面寬度
    },
    "matchMedia": {
      "minWidth": 768 //生效條件，當窗口寬度大于768px時顯示
    }
  }
}
復制代碼

可以看到，無需太多工作量，就可以快速把一個為手機窄屏開發的應用，快速適配為PC寬屏應用。并且以后的代碼維護，仍然是同一套，當業務迭代時不需要多處升級。

這套方案的實施，有如下特征：

• 原先為手機窄屏開發的代碼，基本無需修改，可完全適配到pc寬屏上；后續新增的業務模塊，也是一套代碼，同時兼容寬窄屏。
• 增加pc寬屏適配后，不影響原先mobile端的窄屏實現，窄屏上會自動隱藏leftWindow/rightWindow等擴展窗體。
• rightWindow里的頁面是復用的，不需要重寫新聞詳情頁面，支持把已有詳情頁面當組件放到 rightWindow 頁面中。

更多配置細節，詳見uni-app官方文檔。

leftWindow方案除了適用于將原有的Mobile App適配到大屏顯示，也適用于新開發的PC應用，尤其是PC Admin管理控制臺。

如下是基于leftwindow、topwindow構建的經典pc admin布局：

2. 組件級適配：match-media組件

leftWindow等方案是頁面窗體級適配方案，適用于多頁面的組合分欄顯示。

那么在同一個頁面中，組件是否可以適配不同屏寬？當然可以，此時可以使用組件級適配方案。

除了傳統的css媒體查詢外，uni-app還提供了全平臺兼容的 match-media組件 和配套的 uni.createMediaQueryObserver 方法。

match-media是一個媒體查詢適配組件，可以更簡單的用于動態屏幕適配。

在match-media組件中放置內容，并為該組件指定一組 media query 媒體查詢規則，如屏幕寬度。運行時，如屏幕寬度滿足查詢條件，則這個組件就會被展示，反之則隱藏。

match-media組件的優勢包括：

1. 開發者能夠更方便、顯式地使用 Media Query 能力，而不是耦合在 CSS 文件中，難以復用。
2. 能夠在模板中結合數據綁定動態地使用，不僅能做到組件的顯示或隱藏，在過程式 API 中可塑性也更高。
3. 能夠嵌套式地使用 Media Query 組件，即能夠滿足局部組件布局樣式的改變。
4. 組件化之后，封裝性更強，能夠隔離樣式、模版以及綁定在模版上的交互事件，還能夠提供更高的可復用性。

uni-app推薦采用運行時動態適配的方案，而不是為PC版單獨編寫條件編譯（雖然你也可以通過自定義條件編譯來實現單獨的PC版）。這樣設計的好處是在ipad等設備的瀏覽器上可以方便的橫豎屏切換。

3. rpx的寬屏響應

設計Mobile App時，設計師常會以 iPhone6 作為視覺高的標準，即按照750px屏幕寬度出圖；程序員以750px作為基準，根據設備實際尺寸，動態換算（縮放）出適合當前設備屏幕的元素寬高。

這就是rpx（responsive pixel）的實現思路，只不過rpx由框架引擎動態換算元素尺寸，無需程序員寫代碼干預。

面向mobile端時，rpx是一種很理想的解決方案，因為各種移動設備的屏幕寬度差異不是很大，相對于750px微調縮放后的效果，可最大化的還原設計師的設計。

但是，一旦脫離移動設備，在pc屏幕，或者pad橫屏狀態下，因為屏幕寬度遠大于750了。此時rpx根據屏幕寬度變化的結果就嚴重脫離了預期，大的慘不忍睹。

假設一個圖文列表的展現，我們針對左側縮略圖定義如下css：

.uni-media-list-logo {
    width: 180rpx;
    height: 140rpx;411*(180/750)411*(180/750)411*(180/750)
}
復制代碼

在手機端，這個顯示效果是比較理想的，如下：

當前選擇 pixel 2作為模擬設備，屏幕寬度為411px，故縮略圖的寬度變為：180*(411/750)=98px，高度變為：140*(411/750)=76px，這個理論計算和實際運行相符，且效果較佳。

同樣的代碼，如果運行到pc端，假設屏幕寬度為1920px，則縮略圖的尺寸將變為：180*(1920/750)=460px，高度變為：140*(1920/750)=358px，這個慘不忍睹的大就出來了，一個1920*1080的顯示器，只能顯示2條記錄（主要是縮略圖高度放大導致的），效果如下：

為此，在uni-app 2.9+起，新增了 rpx 按750px做基準屏寬的生效范圍控制，即屏幕寬度超過某閥值（默認為960px）后，將不再以屏幕實際寬度換算元素寬高，而改以固定屏幕寬度（默認為375px）計算元素寬高。

以上述圖文列表為例，當屏幕寬度為1920px（大于960px）時，將采用固定的屏幕寬度（默認375px）計算縮略圖的寬高，即：180*(375/750)=90px，高度變為：140*(375/750)=70px，按照這個機制，pc端運行效果如下，相比上圖的放大變丑，展現更為理想優雅。

Tips：

• 750px生效的屏幕寬度閥值，及寬屏時計算所用的固定屏幕寬度，均支持自定義配置

{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 960, // rpx 計算所支持的最大設備寬度，單位 px，默認值為 960
    "rpxCalcBaseDeviceWidth": 375, // 設備實際寬度超出 rpx 計算所支持的最大寬度時，rpx計算所采用的固定屏幕寬度，單位 px，默認值為 375
  }
}
復制代碼

• 開發者可在rpx寬度管控的基礎上，略作調整，實現更好的pc寬屏效果，如寬屏時，固定列表寬度且居中顯示，如下圖。當然，此處僅為了演示rpx在寬屏下的失控管理，實際應用中，可采用分欄窗口，將列表在左側分欄中顯示，如本文開篇示例截圖。

4. 補充

4.1 通過electron打包為windows、mac、linux客戶端

有了寬屏適配，uni-app的應用就可以方便的通過electron打包為電腦客戶端應用，windows、mac、linux均支持。

開發者可以隨意調用electron的API，以調用更多操作系統的能力（為方便多端兼容，可以將這些特殊API寫在自定義的條件編譯里）

uni-app插件市場有已經封裝好的一些插件，詳見插件市場。

4.2 一個讓手機版網頁臨時可用于pc瀏覽器的方案

如果你的h5版已經開發完畢，還沒來得及適配pc，但想在pc上先用起來。那么可以在pc網頁里使用iframe，約定好寬度，在里面套用uni-app的窄屏版。

當然還可以在iframe旁邊放置二維碼，提供手機版掃碼地址，如下是一個實現示例：

5. 結語

uni-app團隊將keep running，繼續完善uni-app在pc、pad等寬屏設備上的更好適配，并會在ssr、serverless方向上重點投入，提供云端一體的更高效率的解決方案（詳見uniCloud），幫助企業更高效，幫助開發者更輕松！

歡迎大家到GitHub上給我們star鼓勵。

G時代雖然現在消費者用電腦逛淘寶的的機會越來越少，但是對于很多還想入淘的新賣家來說，PC端裝修在他們心中也是至關重要，其實PC端首頁裝修常見的模塊無非就那幾個，店招，導航，輪播海報，優惠券，全屏寬圖等，其中淘寶pc端全屏海報尺寸寬度1920px，高度隨意哈！

當然很多KA商家玩的可能會玩得更花，尤其是在618、雙11這樣的大促期間，加上各種的特效，比如下雪，雪花、元寶、花瓣等，看著很炫酷，間接增加店鋪客戶粘度。

今天幫一個做工業設備的朋友裝修了一下PC端店鋪首頁，對于店招、輪播海報等這些網上教程有很多，沒太多技巧，就那個方法，我就不贅述了，下面來說一下首頁裝修遇到的一個問題就是全屏海報之前空白間隙的問題，該如何去除呢？當然網上也是有很多教程的，也有工具可以去除的，但是按照這種方法操作肯定能夠去除間隙。

很多首頁裝修的時候，全屏海報因為看著高端、大氣、上檔次，因此首頁裝修都是必不可少的，但是會出現海報與海報之前有空白間隙的問題，這個空白間隙一般是20px,當然，有很多美工裝修助手都是可以直接去掉這些空白間隙的，但是幾乎所有的裝修工具都是收費的，那不借助這些收費的工具該如何去除呢？(最后分享一個免費的)

全屏海報的添加都是通過店鋪裝修后臺左側欄中基礎模塊中的自定義區模塊添加的，如果大家稍微知道一些div+css的知識，不借助工具直接在DW里面寫的話一般都會避免出現海報與海報之間間隙的問題。當然如果添加完海報在預覽狀態下出現留白間隙的話，很多時候都是借助工具生產的代碼才會出現這種情況，出現白色間隙先返回裝修頁面點擊右上角 "裝修"，進入自定義內容區，顯示標題處 選擇"不顯示"，然后點擊“源碼”，進入源碼狀態，按下圖所示的1和2 兩個步驟操作修改源碼，可以完美去除海報之間的留白問題。

當然我截圖的代碼顯示的是我這邊height:710px, -20px 就是690px, 你的height是多少， 根據情況減20px就可以了。也就是說1和2步驟都是要減掉白色間隙的20px.

其實經常搞設計的美工，手里都會有幾個經常用到的美工助手工具，而且網上有很多類似 這樣的，免費的功能幾乎都都能滿足日常需要，更會為設計師節省不少時間。在這里就不再分享了哈，以免被誤認為有打廣告的嫌疑.