構建一個雜志布局（譯文）-有解無憂

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

一個雜志的照片

時至今日，我們掌握的web技術已經是今非昔比，日新月異，由我們來決定：要么接受挑戰，要么不學習新事物，我想選擇一種可以使用新CSS技術的設計，并嘗試進一步掌握它們，今天，我選擇一個雜志布局，其中包含一些非常有趣，具有挑戰性的設計細節，

內容

為了正確地用HTML標記，首先我瀏覽了所有內容，對我來說，它讀起來就像一篇帶有標題和描述段落的文章，我想象成像下面的設計模型，

當然，我們不會構建它，但是我想向你們展示在不用雜志版面的情況下設計的外觀，

在HTML中，我添加了以下內容：

<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>

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

Grid

網格布局具有三列，每列具有唯一的大小，我認為這就是為什么布局首先看起來很有創意的原因，

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

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

例如，編號為“50”的專案的位置如下：

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

與其余專案類似，完成后，它應該像這樣：

百分比邊距

我很少使用百分比作為邊距的值，但是對于這種布局，我發現它適合某些情況，我重點突出了可以用到的專案，

我在每個專案中添加了以下內容：

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

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

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

…等等，這些值是通過反復試驗選擇的，所以不是使用的特定數字，完成后，它應如下所示：

彈性盒

如果你尚未發現，布局中的某些專案可以使用flexbox完成，我將向您展示如何構建其中兩個專案，不用說，專案的突出顯示是由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

在這種情況下，彈性專案的方向是垂直的（列），

<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;
}

強制換行

根據設計，有兩個專案，每個專案都有一個句子，每個單詞都要換行，我需要一種在每個詞后強制換行的方法，

最初，我考慮過使用min-content作為元素寬度的值，根據元素內容來計算最小寬度來運行，

.elem {
    width: min-content;
}

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

另一個更保險的解決方案是使用word-spacing大像素值或視窗值的字間距，

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

使字體大小適應容器寬度

無論螢屏大小如何，具有深珊瑚色背景的句子都必須保持一行，我嘗試使用視窗單位，但沒用，經過研究，我了解了fittext.js而不是其父容器中的合適文本，

但是，我考慮過使用ResizeObserver，對于我的用例來說，就好像有一種魔力！我試著算出一個關鍵值將除以父容器的寬度，

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：

視窗單位

因為值大小的改變是流暢，所以我使用了視窗單位，使用它時，請不要忘記設定字體的最大值，以免在大螢屏上顯得太大，

我使用了一個工具將像素值轉換為視窗單位，它是基于視窗寬度和字體大小（以像素為單位）作業的，

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

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

可變字體

這是網路上最令人興奮和最有用的功能之一，在布局中，我考慮過使用可變字體來改變調整字的粗細，

最初，我為字體的寬度和粗細定義了兩個CSS變數，然后，我用它來定義font-variation-settings的值，如果您好奇的話，這是有關可變字體的精彩介紹，

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

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

為了控制調整大小的變數，我為此使用了ResizeObserver，字體粗細將根據其父元素進行更改，

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);
  }
});

在網格中自身對齊

署名（右邊的突出顯示）應在橫條和雜志設計末端之間的中間，

起初，我認為簡單的上邊距就能解決問題，因此我加了以下內容，

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

在這種情況下，邊距等于專案的寬度，沒用！而不是將專案推到頂部，就像加了padding，

由于該行是網格項，因此我應該將對齊方式從默認更改為start

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

最終效果

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39112.html

標籤：Html/Css

上一篇：HTML連載88-今天把努比亞界面仿真寫完了（完結連載）

下一篇：title 換行顯示