星 Galaxy Fold 和 Surface Duo 以及華為mate X等系列折疊屏手機(jī)問(wèn)世至今已有三年多的時(shí)間。此后，三星 Galaxy Z Fold 3 和 Galaxy Z Flip 3、華為mate X2S、榮耀magic V系列等手機(jī)均已上市?？烧郫B設(shè)備可供購(gòu)買，目前正在被消費(fèi)者使用，隨之而來(lái)的是我們作為開(kāi)發(fā)人員可以開(kāi)始探索這種新型設(shè)備和響應(yīng)式設(shè)計(jì)的下一個(gè)發(fā)展的機(jī)會(huì)。

這些 Web 平臺(tái)功能與現(xiàn)有概念（例如視口和媒體查詢）集成，因此開(kāi)發(fā)人員和設(shè)計(jì)人員可以花更多時(shí)間思考如何利用兩個(gè)顯示器來(lái)創(chuàng)建增強(qiáng)體驗(yàn)，而不是學(xué)習(xí)一組新代碼來(lái)構(gòu)建它們。

使用新的 CSS 媒體功能檢測(cè)可折疊設(shè)備

雙屏和可折疊設(shè)備只是響應(yīng)式設(shè)計(jì)的下一步，因此它們被視為另一個(gè)響應(yīng)式設(shè)計(jì)目標(biāo)，我們可以使用媒體功能為其設(shè)計(jì)樣式。我們今天已經(jīng)使用媒體功能和查詢來(lái)定位臺(tái)式機(jī)、平板電腦和手機(jī)，現(xiàn)在我們擁有 CSS Viewport Segments 媒體功能來(lái)定位我們的可折疊和雙屏設(shè)備。

horizontal-viewport-segments

視口分段媒體查詢可以有兩個(gè)值。第一個(gè)是horizontal-viewport-segments，這表示設(shè)備鉸鏈垂直且視口被硬件鉸鏈拆分或折疊成列時(shí)的設(shè)備狀態(tài)。

當(dāng)horizonal-viewport-segment鉸鏈處于垂直折疊姿勢(shì)時(shí)，目標(biāo)是設(shè)備。

為了專門為這種方向的可折疊設(shè)備提供樣式，我們將編寫(xiě)以下內(nèi)容：

@media (horizontal-viewport-segments: 2) {
// Styles specific to the device in this orientation
}

整數(shù)表示設(shè)備方向中存在的視口數(shù)量。當(dāng)設(shè)備像一本書(shū)一樣處于垂直折疊姿勢(shì)時(shí)，我們?cè)谒椒较蛴袃蓚€(gè)不同的視口，在垂直方向只有一個(gè)視口。

我們還可以結(jié)合我們的媒體查詢來(lái)定位雙屏設(shè)備和某些視口寬度，以提供特定的樣式：

@media (horizontal-viewport-segments: 2) and (min-width: 540px) {
   body {
       background: yellow;
  }
}

vertical-viewport-segments

我們的視口分段媒體功能的第二個(gè)值是vertical-viewport-segments，這是設(shè)備鉸鏈水平時(shí)設(shè)備的狀態(tài)，并且硬件鉸鏈將我們的視口分成行。

vertical-viewport-segments目標(biāo)設(shè)備處于水平折疊姿勢(shì)。

要定位在這個(gè)方向旋轉(zhuǎn)的設(shè)備，我們將使用以下代碼：

@media (vertical-viewport-segments: 2) {
  // Styles specific to the device in this orientation
}

使用 JavaScript 檢測(cè)可折疊設(shè)備

在某些情況下，您可能無(wú)法或不想使用 CSS 媒體查詢來(lái)檢測(cè)您的用戶是否在可折疊設(shè)備上，這就是 JavaScript API 的用武之地。最初，提出了一個(gè)名為 Windows Segments Enumeration 的全新 API ，但在開(kāi)發(fā)者社區(qū)通過(guò)原始試驗(yàn)獲得反饋后，在現(xiàn)有的Visual Viewport API 草案規(guī)范的基礎(chǔ)上構(gòu)建更有意義。

視口段屬性

視口段表示位于彼此相鄰的單獨(dú)顯示器上的窗口區(qū)域。要檢測(cè)雙屏設(shè)備，您可以使用以下代碼查詢 segments 屬性：

const segments = window.visualViewport.segments;

此查詢返回的值將是一個(gè)數(shù)組DOMRects，指示有多少視口。如果只有一個(gè)視口段，則查詢將返回null，并以這種方式實(shí)現(xiàn)以防止將來(lái)出現(xiàn)兼容性問(wèn)題，以免開(kāi)發(fā)人員開(kāi)始使用visualViewport.segments[0]針對(duì)單屏設(shè)備。

在雙屏設(shè)備上，查詢將返回 2 DOMRects，表示當(dāng)瀏覽器窗口跨越折疊時(shí)可用的 2 個(gè)視口。

我們存儲(chǔ)在segments常量中的這個(gè)值是查詢屬性時(shí)設(shè)備狀態(tài)的不可變快照，如果瀏覽器窗口調(diào)整大小或設(shè)備旋轉(zhuǎn)，之前檢索到的視口段不再有效，需要查詢?cè)俅瓮ㄟ^(guò)調(diào)整大小或方向事件（或兩者）。

如果您調(diào)整瀏覽器窗口的大小以僅跨越一個(gè)顯示區(qū)域，我們將觸發(fā)調(diào)整大小事件。

如果您旋轉(zhuǎn)設(shè)備，這將觸發(fā)調(diào)整大小和方向事件，您可以使用這些事件再次查詢屬性以獲取瀏覽器顯示區(qū)域的當(dāng)前狀態(tài)。

window.addEventListener("resize", function() {
   const segments = window.visualViewport.segments;
   console.log(segments.length); *// 1*
});

何時(shí)使用 JAVASCRIPT API 與 CSS 媒體功能來(lái)檢測(cè) 設(shè)備

CSS 媒體功能和 JavaScript 段屬性都將檢測(cè)雙屏設(shè)備，但 JavaScript 屬性最好在沒(méi)有使用 CSS 時(shí)使用，當(dāng)您在 Canvas2D 和 WebGL 中處理對(duì)象時(shí)可能會(huì)發(fā)生這種情況。例如，您正在開(kāi)發(fā)的游戲可以同時(shí)利用兩個(gè)屏幕。

使用 CSSenv()變量

除了 CSS 媒體功能之外，還引入了六個(gè)新的 CSS 環(huán)境變量，以幫助開(kāi)發(fā)人員計(jì)算顯示區(qū)域的幾何形狀，計(jì)算鉸鏈區(qū)域在被 Surface Duo 等物理硬件功能遮擋時(shí)的幾何形狀，以及它們還可用于幫助將內(nèi)容放置在每個(gè)顯示區(qū)域的邊界內(nèi)。

六個(gè)新的環(huán)境變量如下：

• env(viewport-segment-width <x> <y>);
• env(viewport-segment-height <x> <y>);
• env(viewport-segment-top <x> <y>);
• env(viewport-segment-left <x> <y>);
• env(viewport-segment-bottom <x> <y>);
• env(viewport-segment-right <x> <y>);

x和位置表示由分隔每個(gè)視口段的硬件功能創(chuàng)建的y二維網(wǎng)格，坐標(biāo)0,0從左上段開(kāi)始。

當(dāng)您的設(shè)備處于垂直折疊姿勢(shì)且視口并排時(shí)，左側(cè)的視口段將由 表示env(viewport-segment-width 0 0)，而右側(cè)的視口段將由 表示env(viewport-segment-width 1 0)。如果您將設(shè)備轉(zhuǎn)換為水平折疊姿勢(shì)，視口堆疊，頂部將由 表示env(viewport-segment-height 0 0)，底部視口由表示env(viewport-segment-height 0 1)。

使用env(viewport-segment-width)andenv(viewport-segment-width)時(shí)，除了索引之外，我們還可以設(shè)置一個(gè)后備值，如下所示：

env(viewport-segment-width 0 0, 100%);

但是這個(gè)額外的后備值是可選的，由作者自行決定，如果他們想包含它。

計(jì)算鉸鏈寬度

當(dāng)您的設(shè)備的鉸鏈被硬件功能遮擋時(shí)，您可以使用提供的環(huán)境變量來(lái)計(jì)算它。

我們可以使用環(huán)境變量計(jì)算設(shè)備鉸鏈。

在我們的示例中，我們有一個(gè)處于垂直姿勢(shì)的設(shè)備，并且想要找到鉸鏈寬度，這樣就不會(huì)遮擋任何內(nèi)容。我們將從左顯示器的右視口段中減去右顯示器的左視口段：

calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));

使用 CSSenv()變量 放置內(nèi)容

我們可以使用 CSS 環(huán)境變量在顯示區(qū)域邊界內(nèi)放置內(nèi)容，如果您想將內(nèi)容直接放置在鉸鏈或折疊處，這些特別有用。

在下面的示例中，我們將在左側(cè)第一個(gè)顯示區(qū)域的鉸鏈上直接放置圖像。該區(qū)域是視口的右側(cè)部分，因此我們將使用viewport-segment-right以下代碼放置它：

img {
  max-width: 400px;
}

@media (horizontal-viewport-segments: 2) {
  img {
      position: absolute;
      left: env(viewport-segment-right 0 0);
  }
}

如果我們?cè)?Surface Duo 模式下在 Edge 開(kāi)發(fā)人員工具中模擬我們的屏幕，我們將獲得以下布局：

最初使用環(huán)境變量將圖像放置在我們的布局中會(huì)將其放置在錯(cuò)誤的顯示區(qū)域中。

這不是我們想要的。圖像應(yīng)位于左側(cè)的顯示區(qū)域中。

因?yàn)閳D像是使用屬性絕對(duì)定位的left，所以圖像的左邊緣最終與viewport-segment-right顯示區(qū)域?qū)R。

然后，我們需要從環(huán)境變量中減去圖像的寬度，以使圖像與正確的鉸鏈邊緣對(duì)齊：

img {
   max-width: 400px;
}

@media (horizontal-viewport-segments: 2) {
   img {
       position: absolute;
       left: calc(env(viewport-segment-right 0 0) - 400px);
  }
}

從視口段中減去圖像寬度會(huì)將其沿左側(cè)顯示中的鉸鏈放置。

現(xiàn)在我們將圖像放置在我們想要的位置。有關(guān)如何沿鉸鏈對(duì)齊項(xiàng)目的其他示例，您可以查看這個(gè)簡(jiǎn)單的盒子演示。打開(kāi)Edge Developer Tools>Device Emulation然后選擇Surface Duo并確保您Duo emulation處于校正方向姿勢(shì)。

把它們放在一起：讓我們構(gòu)建一個(gè)適應(yīng)雙屏設(shè)備的食譜頁(yè)面

作為一個(gè)在做飯時(shí)經(jīng)常使用手機(jī)的人，當(dāng)我在我的雙屏設(shè)備上時(shí)會(huì)適應(yīng)的食譜網(wǎng)站會(huì)非常有幫助。讓我們來(lái)看看如何考慮為它調(diào)整一個(gè)單獨(dú)的食譜頁(yè)面。

我想考慮我將如何分塊我的主要內(nèi)容。通常情況下，我至少會(huì)看到食譜標(biāo)題、制作的份量、烹飪需要多長(zhǎng)時(shí)間、一張或多張圖片、配料以及制作菜肴的步驟。

當(dāng)我畫(huà)出我的線框時(shí)，我得到以下信息：

桌面上食譜頁(yè)面的標(biāo)準(zhǔn)布局

我希望我的標(biāo)題和食譜詳細(xì)信息在最頂部，然后是一個(gè)占據(jù)整個(gè)內(nèi)容寬度的圖像，然后是成分列表和食譜步驟。我不想堆疊后兩個(gè)內(nèi)容組，因?yàn)槿绻叶询B它們，成分列表的右側(cè)會(huì)有很多空白，所以我希望步驟坐在成分旁邊，給我兩列圖片下方。

用于布局的 CSS 網(wǎng)格或 FLEXBOX？

我知道我想如何在普通桌面屏幕上布置這個(gè)食譜，并且有多種方法可以對(duì)這個(gè)布局進(jìn)行編碼和對(duì)內(nèi)容進(jìn)行分組，但我如何對(duì)其進(jìn)行分組，以及我想在雙屏上實(shí)現(xiàn)什么布局在我編碼之前需要考慮設(shè)備。根據(jù)我為桌面視圖所做的草圖，我可以使用 flexbox 和 CSS Grid 的組合來(lái)實(shí)現(xiàn)我想要的布局，我將成分和步驟分組到一個(gè) flex 容器中。但是讓我勾勒一下我希望我的頁(yè)面如何在雙屏上顯示。

垂直折疊位置的可折疊設(shè)備上的理想布局通過(guò)顯示屏將內(nèi)容分開(kāi)，因此不會(huì)被鉸鏈遮擋。

如果我想在布局上有更大的靈活性，那么我不能將我的成分和步驟分組到一個(gè) flex 容器中，否則，無(wú)論圖像沒(méi)有進(jìn)入哪一列，都會(huì)有很大的空白。

如果我只在這個(gè)布局中使用 flexbox，它會(huì)產(chǎn)生一些我想避免亂用的間距。

添加我們的內(nèi)容

我將在桌面和雙屏布局中只使用 CSS Grid。所以，讓我們構(gòu)建我們的內(nèi)容。

<main>
  <section class="recipe">
      <div class="recipe-meta">
          … <!—Contains our recipe title, yield and servings -->
      </div>
      <img src="imgs/pasta.jpg" alt="Pasta carbonara photographed from above on a rustic plate" />
      <div class="recipe-details__ingredients">
          …<!— Contains our ingredients list -->
      </div>
      <div class="recipe-details__preparation">
          … <!— Contains our list of steps to put the ingredients together -->
      </div>
  </section>
</main>

接下來(lái)，讓我們構(gòu)建頁(yè)面的結(jié)構(gòu)。我要定義我的網(wǎng)格：我只想要三列，并且我希望它們是容器的相等部分。

.recipe {
display: grid;
grid-template-columns: repeat(3, 1fr);

接下來(lái)，我將定義我的行，并且我將使用grid-auto-rowswith minmax，這樣我的行是最小的，175px但可以增長(zhǎng)到最大內(nèi)容高度的最大值。

grid-auto-rows: minmax(175px, max-content);

然后我將添加更多屬性： my grip-gap、我的最大內(nèi)容寬度和一個(gè)邊距，以使我的布局在頁(yè)面上居中。

grid-gap: 1rem;
max-width: 64rem;
margin: 0 auto;
}

然后，我將把我的內(nèi)容放入我定義的網(wǎng)格中：

.recipe-meta {
   grid-column: 1 / 4;
}

.recipe-meta p {
   margin: 0;
}

img {
   width: 100%;
   grid-column: 1 / 4;
}

.recipe-details__ingredients {
   grid-row: 3;
}

.recipe-details__preparation {
   grid-column: 2 / 4;
   grid-row: 3;
}

這將根據(jù)我的草圖為我提供布局：

布局在桌面上按預(yù)期呈現(xiàn)

偉大的！但是我的雙屏布局呢？讓我們深入了解我們的horizontal-viewport媒體功能和雙屏網(wǎng)格。

使用媒體查詢和調(diào)整容器布局

首先，這是我現(xiàn)在在雙屏上的布局：

在沒(méi)有實(shí)現(xiàn)任何雙屏代碼的情況下，如果用戶想要將瀏覽器跨過(guò)兩個(gè)顯示器，那么頁(yè)面將是這樣的。

如果我們向下滾動(dòng)：

如果用戶選擇跨越兩個(gè)顯示器，則內(nèi)容會(huì)被鉸鏈遮擋。

不是很好。我們的內(nèi)容被鉸鏈遮住了，所以讓我開(kāi)始重新定義我的網(wǎng)格。

對(duì)于我的網(wǎng)格列，我仍將使用三列，但我希望一列占據(jù)左側(cè)的第一個(gè)視口段，另外兩列占據(jù)右側(cè)視口段，因此我將使用我的 CSS環(huán)境變量env(viewport-segment-width 0 0)告訴瀏覽器，對(duì)于我的第一列，我希望它占據(jù)第一個(gè)顯示區(qū)域的整個(gè)視口。

@media (horizontal-viewport-segments: 2) {

/* Body styles for smaller screens */
body {
       font: 1.3em/1.8 base, 'Playfair Display', serif;
       margin: 0;
  }

.recipe {
   grid-template-columns: env(viewport-segment-width 0 0 1fr 1fr;
   grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
}

}

對(duì)于我的行，我希望在放置上更靈活一點(diǎn)，所以我將重復(fù)兩行175px，這是關(guān)于帶有配方標(biāo)題、產(chǎn)量和時(shí)間信息的容器的高度，之后的行應(yīng)該匹配我最初在網(wǎng)格中定義的內(nèi)容。

如果我在 DevTools 中檢查我的設(shè)計(jì)，我可以看到我在配方容器上設(shè)置的width和margin最初將我想要與我的視口段對(duì)齊的網(wǎng)格線推到正確的視口段中。

添加我的代碼后，我的內(nèi)容不再被遮擋，但仍需要一些間距調(diào)整。

要重置它，我將重置我的marginand max-width。

@media (horizontal-viewport-segments: 2) {

.recipe {
   grid-template-columns: env(viewport-segment-width 0 0) 1fr 1fr;
   grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
   margin: 0;
   max-width: 100%;
}

}

重置我的邊距和填充會(huì)掩蓋右側(cè)顯示中的內(nèi)容。

現(xiàn)在我要把我的內(nèi)容放在網(wǎng)格中并調(diào)整我的布局。

.recipe-meta {
   grid-column: 1 / 2;
   padding: 0 2rem;
}

img {
   grid-column: 2 / 4;
   grid-row: 1 / 3;

   width: 100%;
   height: 100%;
   object-fit: cover;
   /* necessary to keep the image within the grid lines */
}

.recipe-details__ingredients {
   grid-row: 2;
   padding: 0 2rem;
}

.recipe-details__preparation {
   grid-column: 2 / 4;
   grid-row: 3;
   padding: 0 2rem 0 3rem;
}

我已經(jīng)對(duì)內(nèi)容應(yīng)用了填充，除了我決定要跨越整個(gè)視口的圖像。對(duì)于圖像下方的內(nèi)容，由于從物理鉸鏈下方開(kāi)始的網(wǎng)格線的性質(zhì)，我想添加額外的填充，因此它看起來(lái)左側(cè)的填充與其他帶有填充的項(xiàng)目相同。如果我不添加額外的，它會(huì)落得太靠近鉸鏈。因?yàn)槲乙呀?jīng)有一個(gè) grid-gap1rem并且我想將 padding 加倍，所以我將添加3rem而不是4rem為我們提供雙屏設(shè)備上的最終布局：

我可以重新添加尺寸更合適的填充來(lái)顯示內(nèi)容，因此它不會(huì)在帶有物理鉸鏈的設(shè)備上被遮擋。

只需對(duì)我們的 CSS 進(jìn)行一些小的調(diào)整并使用其中一項(xiàng)新的媒體功能，我們就有了一個(gè)適應(yīng)雙屏設(shè)備的布局。要查看體驗(yàn)，請(qǐng)前往此處的 Edge 演示站點(diǎn)或基于 Chromium 的瀏覽器，然后打開(kāi)瀏覽器開(kāi)發(fā)人員工具以查看 Surface Duo 仿真。如果您在 Chrome 中打開(kāi)該站點(diǎn)，請(qǐng)確保在 下啟用了實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能標(biāo)志chrome://flags，以便演示正確顯示。

單屏響應(yīng)式設(shè)計(jì)細(xì)節(jié)

為了確保我們考慮到小型單屏設(shè)備，我為手機(jī)布局選擇的代碼使用了 flexbox 并將所有內(nèi)容放在一個(gè)列中：

@media (max-width: 48rem) {

   body {
       font: 1.3em/1.8 base, 'Playfair Display', serif;
  }

   .recipe-details {
       display: flex;
       flex-direction: column;
  }

}

API 瀏覽器可用性和無(wú)設(shè)備測(cè)試

默認(rèn)情況下，這些雙屏 API 在 Microsoft Edge 和 Android 上的 Edge 中可用，從版本 97 開(kāi)始。這些計(jì)劃很快就會(huì)出現(xiàn)在其他 Chromium 瀏覽器中，但具體時(shí)間尚未確定。要在 Chrome 中啟用這些 API，請(qǐng)轉(zhuǎn)到chrome://flags并啟用實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能。

雖然這些是相對(duì)較新的設(shè)備，但許多現(xiàn)在已經(jīng)進(jìn)入第二代和第三代，因此公司正在投資它們。如果您無(wú)法使用物理設(shè)備，最好的測(cè)試方法是使用瀏覽器開(kāi)發(fā)工具。我已經(jīng)在仿真工具和 Surface Duo 上測(cè)試了我的網(wǎng)站，Duo 的仿真工具似乎是相同的。我的設(shè)計(jì)在設(shè)備上的外觀與在 DevTools 中的外觀相同。它使構(gòu)建和設(shè)計(jì)雙屏設(shè)備就像開(kāi)發(fā)桌面和單屏移動(dòng)設(shè)備一樣容易。

如果您使用的是不支持這些 API 的桌面或設(shè)備，則可以為 Visual Viewport Segments 屬性提供一個(gè) polyfill。CSS 媒體查詢沒(méi)有 API。目前，市場(chǎng)上的雙屏設(shè)備都是基于安卓的，這些API計(jì)劃在安卓上可用的基于Chromium的瀏覽器中。

如果可折疊設(shè)備上的瀏覽器不支持這些功能，您可以使用 polyfill 或確保您的網(wǎng)站在小單屏上仍能很好地呈現(xiàn)，因?yàn)橛脩艨梢造`活選擇如何在雙屏上顯示網(wǎng)站屏幕設(shè)備。他們可以跨兩個(gè)顯示器跨越一個(gè)網(wǎng)站，或者他們可以選擇讓它跨一個(gè)顯示器，如果他們選擇后者，它將像在平板電腦或手機(jī)上一樣顯示。即使您的網(wǎng)站沒(méi)有雙屏實(shí)現(xiàn)，用戶仍然可以選擇單顯示視圖。雙屏 API 提供了一種方法來(lái)逐步增強(qiáng)擁有設(shè)備的用戶的體驗(yàn)。

結(jié)束

雙屏設(shè)備只是響應(yīng)式設(shè)計(jì)的下一個(gè)發(fā)展方向。如果您有 PWA 或網(wǎng)站，可用的 API 可以無(wú)縫集成到您現(xiàn)有的代碼庫(kù)中。還有其他方法可以為雙屏設(shè)備構(gòu)建應(yīng)用程序，您可以在Surface Duo 文檔https://docs.microsoft.com/en-us/dual-screen/中查看這些方法。這是在網(wǎng)絡(luò)上進(jìn)行布局的激動(dòng)人心的時(shí)刻，雙屏提供了獲得更多創(chuàng)意的機(jī)會(huì)。

為幫助到一部分同學(xué)不走彎路，真正達(dá)到一線互聯(lián)網(wǎng)大廠前端項(xiàng)目研發(fā)要求，首次實(shí)力寵粉，打造了《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》，內(nèi)容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實(shí)企業(yè)項(xiàng)目開(kāi)發(fā)，云服務(wù)器部署上線，從入門到精通

• PC端項(xiàng)目開(kāi)發(fā)（1個(gè)）
• 移動(dòng)WebApp開(kāi)發(fā)（2個(gè)）
• 多端響應(yīng)式開(kāi)發(fā)（1個(gè)）
• 
  

共4大完整的項(xiàng)目開(kāi)發(fā) ！一行一行代碼帶領(lǐng)實(shí)踐開(kāi)發(fā)，實(shí)際企業(yè)開(kāi)發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開(kāi)始就進(jìn)入工作狀態(tài)，省得浪費(fèi)時(shí)間。

從學(xué)習(xí)一開(kāi)始就同步使用 Git 進(jìn)行項(xiàng)目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實(shí)大廠項(xiàng)目的開(kāi)發(fā)標(biāo)準(zhǔn)和設(shè)計(jì)規(guī)范，命名規(guī)范，項(xiàng)目代碼規(guī)范，SEO優(yōu)化規(guī)范

從藍(lán)湖UI設(shè)計(jì)稿 到 PC端，移動(dòng)端，多端響應(yīng)式開(kāi)發(fā)項(xiàng)目開(kāi)發(fā)

• 真機(jī)調(diào)試，云服務(wù)部署上線；
• Linux環(huán)境下 的 Nginx 部署，Nginx 性能優(yōu)化；
• Gzip 壓縮，HTTPS 加密協(xié)議，域名服務(wù)器備案，解析；
• 企業(yè)項(xiàng)目域名跳轉(zhuǎn)的終極解決方案，多網(wǎng)站、多系統(tǒng)部署；
• 使用 使用 Git 在線項(xiàng)目部署；
• 
  

這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》中每一個(gè)細(xì)節(jié)都有講到，包含視頻+圖文教程+項(xiàng)目資料素材等。只為實(shí)力寵粉，真正一次掌握企業(yè)項(xiàng)目開(kāi)發(fā)必備技能，不走彎路 ！

過(guò)程中【不涉及】任何費(fèi)用和利益，非誠(chéng)勿擾 。

如果你沒(méi)有添加助理老師微信，可以添加下方微信，說(shuō)明要參加30天挑戰(zhàn)學(xué)習(xí)計(jì)劃，來(lái)自！老師會(huì)邀請(qǐng)你進(jìn)入學(xué)習(xí)，并給你發(fā)放相關(guān)資料。

30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程