與以往的Web布局不同的雜志布局，原文地址 Highlights From Building a Magazine Layout 25 Nov 2019

一個(gè)雜志的照片

時(shí)至今日，我們掌握的web技術(shù)已經(jīng)是今非昔比。日新月異。由我們來(lái)決定：要么接受挑戰(zhàn)，要么不學(xué)習(xí)新事物。我想選擇一種可以使用新CSS技術(shù)的設(shè)計(jì)，并嘗試進(jìn)一步掌握它們。今天，我選擇一個(gè)雜志布局，其中包含一些非常有趣，具有挑戰(zhàn)性的設(shè)計(jì)細(xì)節(jié)。

內(nèi)容

為了正確地用HTML標(biāo)記，首先我瀏覽了所有內(nèi)容。對(duì)我來(lái)說(shuō)，它讀起來(lái)就像一篇帶有標(biāo)題和描述段落的文章。我想象成像下面的設(shè)計(jì)模型。

當(dāng)然，我們不會(huì)構(gòu)建它，但是我想向你們展示在不用雜志版面的情況下設(shè)計(jì)的外觀。

在HTML中，我添加了以下內(nèi)容：

<div class="magazine">
  <div class="item item-72"></div>
  <div class="item item-50">
    <span>...Has lived quietly in harvard square for nearly</span>
    <span class="num">50</span>
    <span>years</span>
  </div>
  <!-- Other items -->
</div>

注意，我將內(nèi)容放置在<span>內(nèi)，以便以后可以通過(guò)CSS輕松控制它。初始HTML的外觀如下：

Grid

網(wǎng)格布局具有三列，每列具有唯一的大小。我認(rèn)為這就是為什么布局首先看起來(lái)很有創(chuàng)意的原因。

.magazine {
  display: grid;
  grid-template-columns: 1.35fr 1fr 110px;
}

定義網(wǎng)格后，需要使用grid-column和grid-row將每個(gè)元素放置在其位置。借助Firefox DevTools的網(wǎng)格，這很容易。確保激活“Display line numbers”。

例如，編號(hào)為“50”的項(xiàng)目的位置如下：

.item-50 {
    grid-row: 1/3;
    grid-column: 2/3;
}

與其余項(xiàng)目類(lèi)似。完成后，它應(yīng)該像這樣：

百分比邊距

我很少使用百分比作為邊距的值，但是對(duì)于這種布局，我發(fā)現(xiàn)它適合某些情況。我重點(diǎn)突出了可以用到的項(xiàng)目。

我在每個(gè)項(xiàng)目中添加了以下內(nèi)容：

.item-72 { margin-left: 25%; }

.item-50 { margin-top: 6%; }

.item-decades { margin-left: 10%; }

…等等。這些值是通過(guò)反復(fù)試驗(yàn)選擇的，所以不是使用的特定數(shù)字。完成后，它應(yīng)如下所示：

彈性盒

如果你尚未發(fā)現(xiàn)，布局中的某些項(xiàng)目可以使用flexbox完成。我將向您展示如何構(gòu)建其中兩個(gè)項(xiàng)目。不用說(shuō)，項(xiàng)目的突出顯示是由Firefox DevTools完成的。

case 1

<div class="item item-friends">
    <span>She wrote a new drama about</span> 
    <span class="num">4</span> 
    <span>cambridge friends</span>
</div>

.item-friends {
    display: flex;
}

.item-friends span:last-child {
    align-self: flex-end;
}

case 2

在這種情況下，彈性項(xiàng)目的方向是垂直的（列）。

<div class="item item-50">
    <span>...Has lived quietly in harvard square for nearly</span> 
    <span class="num">50</span> 
    <span>years.</span>
</div>

.item-50 {
    display: flex;
    flex-direction: column;
}

.item-50 span:last-child {
    align-self: flex-end;
}

強(qiáng)制換行

根據(jù)設(shè)計(jì)，有兩個(gè)項(xiàng)目，每個(gè)項(xiàng)目都有一個(gè)句子，每個(gè)單詞都要換行。我需要一種在每個(gè)詞后強(qiáng)制換行的方法。

最初，我考慮過(guò)使用min-content作為元素寬度的值。根據(jù)元素內(nèi)容來(lái)計(jì)算最小寬度來(lái)運(yùn)行。

.elem {
    width: min-content;
}

雖然這可能在所有情況下都行不通。我稍微改變了文字可以了：

另一個(gè)更保險(xiǎn)的解決方案是使用word-spacing大像素值或視窗值的字間距。

.elem {
    word-spacing: 9999px;
    /* Or */
    word-spacing: 100vw;
}

使字體大小適應(yīng)容器寬度

無(wú)論屏幕大小如何，具有深珊瑚色背景的句子都必須保持一行。我嘗試使用視窗單位，但沒(méi)用。經(jīng)過(guò)研究，我了解了fittext.js而不是其父容器中的合適文本。

但是，我考慮過(guò)使用ResizeObserver，對(duì)于我的用例來(lái)說(shuō)，就好像有一種魔力！我試著算出一個(gè)關(guān)鍵值將除以父容器的寬度。

let itemBar = document.querySelector('.item-bar');

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    let w = entry.contentRect.width; /* Width of parent */
    let fz = w/29; /* Font size */
    itemBar.style.fontSize = fz + "px";
  }
});

ro.observe(itemBar);

難道不比使用腳本好嗎？ResizeObserver更好。這是顯示的GIF：

視窗單位

因?yàn)橹荡笮〉母淖兪橇鲿?，所以我使用了視窗單位。使用它時(shí)，請(qǐng)不要忘記設(shè)置字體的最大值，以免在大屏幕上顯得太大。

我使用了一個(gè)工具將像素值轉(zhuǎn)換為視窗單位。它是基于視窗寬度和字體大?。ㄒ韵袼貫閱挝唬┕ぷ鞯摹?/p>

我還使用它將文本與其對(duì)應(yīng)的數(shù)字對(duì)齊。我使用CSS Calc()組合了vw和vh值，如下所示。

.elem {
    position: relative;
    bottom: calc(-2vw - 9vh);
}

可變字體

這是網(wǎng)絡(luò)上最令人興奮和最有用的功能之一。在布局中，我考慮過(guò)使用可變字體來(lái)改變調(diào)整字的粗細(xì)。

最初，我為字體的寬度和粗細(xì)定義了兩個(gè)CSS變量。然后，我用它來(lái)定義font-variation-settings的值。如果您好奇的話(huà)，這是有關(guān)可變字體的精彩介紹。

:root {
  --width: 100;
  --weight: 500;
}

.num {
    font-variation-settings: 'wdth' var(--width), 'wght' var(--weight);
}

為了控制調(diào)整大小的變量，我為此使用了ResizeObserver。字體粗細(xì)將根據(jù)其父元素進(jìn)行更改。

const ro_2 = new ResizeObserver(entries => {
  for (let entry of entries) {
    let w = entry.contentRect.width;
    let wdth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--width'));
    let f = wdth + w;
    document.documentElement.style.setProperty('--weight', w*1.5);
  }
});

在網(wǎng)格中自身對(duì)齊

署名（右邊的突出顯示）應(yīng)在橫條和雜志設(shè)計(jì)末端之間的中間。

起初，我認(rèn)為簡(jiǎn)單的上邊距就能解決問(wèn)題，因此我加了以下內(nèi)容。

.item-byline {
    margin-top: -100%;
}

在這種情況下，邊距等于項(xiàng)目的寬度。沒(méi)用！而不是將項(xiàng)目推到頂部，就像加了padding。

由于該行是網(wǎng)格項(xiàng)，因此我應(yīng)該將對(duì)齊方式從默認(rèn)更改為start

.item-byline {
    margin-top: -100%;
    align-self: start;
}

最終效果