CSS-响应式布局

响应式CSS 网格

grid

.smol-css-grid {
  --min: 15ch; // ch 表示`ch` 是一个相对单位，表示字符 "0" 的宽度（数字 `0` 的宽度）。`15ch` 就是 15 个 "0" 的宽度。这个单位非常适合与字体宽度相关的布局，尤其是当你想让元素的宽度基于字符数来适应时。
  --gap: 1rem;

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow
  in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

flex

.smol-flexbox-grid {
  --min: 10ch;
  --gap: 1rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.smol-flexbox-grid > * {
  flex: 1 1 var(--min);
}

grid 内容 水平垂直居中

.smol-centering {
  display: grid;
  place-content: center;
}

内容水平居中

.smol-container {
  width: min(100% - 3rem, var(--container-max, 60ch));
  margin-inline: auto;
}

限制内容宽度

.smol-breakout-grid {
  --max-content-width: 50ch;
  --breakout-difference: 0.2;

  /*  Compute total allowed grid width to `--breakout-difference` 
      larger than content area  */
  --breakout-grid-width: calc(
      var(--max-content-width) +
      (var(--max-content-width) * var(--breakout-difference))
    );

  display: grid;
  grid-template-columns:
    [grid-start] 1fr 
    [content-start] minmax(
      min(100%, var(--max-content-width)),
      1fr
    )
    [content-end] 1fr 
    [grid-end];
  width: min(100% - 2rem, var(--breakout-grid-width));
  row-gap: 1rem;
  margin: 5vb auto;
}

.smol-breakout-grid > *:not(.breakout) {
  grid-column: content; // 这里表示 横跨内容区域
}

.smol-breakout-grid > .breakout {
  grid-column: grid; //表示横跨整个网格
}

• grid-column: content; ：表示这个元素会被放置在从 content-start 到 content-end 之间的区域。这是因为 content 在这里被当作一个别名，实际上它是一个对 content-start 和 content-end 之间网格线的引用。
• grid-column: grid; ：表示这个元素会被放置在整个网格区域内，也就是从 grid-start 到 grid-end 之间。和 content 一样，grid 是一个网格线的别名，实际引用了 grid-start 到 grid-end 这两条线。

grid 替代 绝对定位（absolute positioning）

.smol-stack-layout {
  display: grid; //首先容器设置grid 和grid-template-areas
  grid-template-areas: "stack";
  //设定一个名为 `"stack"` 的单一网格区域，所有内容将放置在这个区域中
  aspect-ratio: var(--stack-aspect-ratio);
  background-color: #200070;
}

.smol-stack-layout > * {
  grid-area: stack;
  //将smol-stack-layout下的子元素放入到"stack" 这个区域下
}

.smol-stack-layout video {
  width: 100%;
}

.smol-stack-layout h3 {
  place-self: center;
  //代替定位定位 表示`align-content` 和 `justify-content` 的简写，作用是同时控制 **内容在容器中的水平** 和 **垂直居中对齐**
  font-size: clamp(2.5rem, 5vw, 5rem);
  text-align: center;
  line-height: 1;
  font-style: italic;
  padding: 5vh 2vw;
}

.smol-stack-layout--video small {
  align-self: end;
  justify-self: start;
  //使用align-self justify-self 来定位
  padding: 0 0 0.25em 0.5em;
  opacity: 0.8;
  font-size: 0.8rem;
}

.smol-stack-layout h3,
.smol-stack-layout small {
  position: relative;
  color: #fff;
}

使用 clamp

.smol-responsive-padding {
  padding: 1.5rem clamp(1rem, 5%, 3rem);
  //clamp()值顺序可以解释为：最小允许值为1rem，理想值为5%（相对于元素），最大允许值为3rem。
}

左侧最大宽度固定，右侧自适应布局

.smol-sidebar {
  display: grid;
  grid-template-columns: fit-content(20ch) minmax(min(50vw, 30ch), 1fr);
}

• 第一列宽度最大为 20 个字符。

• 第二列的宽度则具有更多灵活性：

  • 最小宽度 ：当屏幕尺寸较小时，第二列会根据 50vw 或 30ch 中较小的值来调整。即使屏幕较小，它也不会缩小到低于 min(50vw, 30ch) 的宽度。
  • 最大宽度：如果第二列有多余的空间，它会扩展，占据剩余的空间。

## Aspect Ratio Gallery 固定宽高比的画布

SmolCSS - Smol Aspect Ratio Gallery

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.65;
  padding: 2rem;
  background-color: #f5f2f7;
  color: #29344B;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

/***
 🟣 SmolCSS Snippet Styles
 */
.smol-flexbox-grid {
  --min: 15ch;
  --gap: 1rem;

  display: flex;
  flex-wrap: wrap; //要允许换行
  gap: var(--gap);
}

.smol-flexbox-grid > * {
  flex: 1 1 var(--min); //设置flex
}
`flex: 1 1 var(--min);` 实际上告诉浏览器：
-   **`flex-grow: 1`**：当有额外的空间时，元素会按比例扩展，且它的扩展行为与其他同样设置为 `1` 的元素是平等的。
-   **`flex-shrink: 1`**：如果空间不足，元素会按比例收缩。
-   **`flex-basis: var(--min)`** ：元素的初始大小由 `--min` 变量决定，可以是一个最小的尺寸（比如 `15rem`）或其它定义的值。

.smol-aspect-ratio-gallery {
  --min: 15rem;
  --aspect-ratio: 4/3;
  --gap: 0;
}

.smol-aspect-ratio-gallery li {
  height: max(25vh, 15rem);
}

@supports (aspect-ratio: 1) {
  .smol-aspect-ratio-gallery li {
    aspect-ratio: var(--aspect-ratio);
    height: auto;
  }
}

.smol-aspect-ratio-gallery img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}



/* Additional demo styles from SmolCSS.dev
   Not all styles may be needed for this pen */
body > ul {
  list-style: none;
  margin: 0;

  &:not([data-padding-unset]) {
    padding: 0;
  }
}

[class*="smol"]:not([data-component]) > *:not([data-unstyled]) {
  display: grid;
  padding: 1rem;
  background-color: #E0D4F6;
  color: #675883;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: bold;
  text-align: center;
  border-radius: 0.15em;
  border: 1px dashed;

  &:not([data-text]) {
    place-content: center;
  }

  &[data-text] {
    font-size: 1.15rem;
    text-align: left;
  }
}

[data-container-style] {
  outline: 2px dotted #29344B;
}

Flexible Unbreakable Boxes

.smol-unbreakable-box {
  --color-light: #E0D4F6;
  --color-dark: #675883;

  margin: 2rem auto;
  color: var(--color-dark);
  background-color: var(--color-light);
  font-size: 1.15rem;
  /* Smol Responsive Padding FTW! */
  padding: clamp(.75rem, 3%, 2rem);
  /* Provide a max-width and prevent overflow */
  width: min(50ch, 90%);
  /* Help prevent overflow of long words/names/URLs */
  word-break: break-word;  //会强制长单词、名字或 URL 换行，防止它们溢出容器。
  /* Optional, not supported for all languages */
  hyphens: auto;//尝试在适当的位置自动插入连字符以断开单词，避免单词溢出容器。
}

.smol-unbreakable-box footer {
  padding: 0.25em 0.5em;
  margin-top: 1rem;
  color: var(--color-light);
  background-color: var(--color-dark);
  font-size: 0.9rem;
  /* Creates a visual box shrunk to `max-content` */
  width: fit-content;//`fit-content`，即根据其内容的实际宽度自适应。
}