正则表达式懒人_懒人的响应式排版指南

最新推荐文章于 2021-01-12 13:50:01 发布

翻译最新推荐文章于 2021-01-12 13:50:01 发布 · 277 阅读

文章标签：

#列表 #css #html #java #notepad++

本文介绍了一种懒人响应式排版方法，通过调整HTML选择器大小，使字体能随屏幕尺寸变化自动调整，简化网页设计过程。文章提供了具体实现步骤及代码示例。

正则表达式懒人

排版可以说是任何网站设计中最重要的部分。空白页上巨大的标题可能看起来像一个极简主义者的梦想，但当我们开始为越来越小的设备开始缩小页面时会发生什么？

嗯！！！一切都破裂了，看起来糟透了。

这就是为什么我们需要响应式排版。我们需要可以自行调整以缩小断点的字体。但是，没有一个头脑正确的人愿意为页面上的每个印刷元素重新设置所有基线样式的麻烦。

幸运的是，我们可以更改html选择器的大小，以便其所有后代继承一个相对较小的大小。

例如

让我们从一些示例厨房水槽标记开始：

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid.
</p>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

通过填充我们的html选择器将其从墙上推开一点，我们将重置所有印刷元素的margin-top ，因为当h1标签的顶部比应该放置的图像低大约一英寸时，这确实很烦人旁边的。目前，所有其他内容仍将保留为浏览器的默认设置。

我们在这里使用Stylus是因为，您可能知道，我非常喜欢Stylus的简洁语法：

html
  padding: 2rem

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0

良好的开端，但是大字体和小字体的大字体现在是一个很好的趋势，所以让我们添加一下。我们还将添加一些line-height以确保我们的段落看起来不错。

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0

线高修复

但是现在我们的元素在margin-bottom有一个很大的margin-bottom ，而我们的页眉也有一个很大的line-height 。幸运的是，这是一个快速修复：

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0
  margin-bottom: 1rem

h1, h2, h3, h4, h5, h6
  margin-bottom: .5rem
  line-height: 1.1

那里！我们的懒惰排版已经完成。我们错过了很多印刷元素（块引用，定义列表等），但是在遇到它们时可以随时将它们添加到样板中。

视口较小

现在，再次，当我们收缩视口时会发生什么？我们的字体看起来糟透了。这很难阅读，将要求用户轻扫几次才能阅读段落。

因此，通过添加一些媒体查询并在每个断点处更改html选择器的font-size解决此问题：

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5
  @media (max-width: 900px)
    font-size: 20px
  @media (max-width: 500px)
    font-size: 14px

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0
  margin-bottom: 1rem

h1, h2, h3, h4, h5, h6
  margin-bottom: .5rem
  line-height: 1.1

瞧！

在那里，您可以在五分钟内完成响应式印刷样板。所有印刷元素的大小均与html元素有关，因此，通过在较小的屏幕上使用较小的html字体大小，我们可以按比例减少所有内容。

在CodePen上的全屏演示。

进一步阅读

如果您对真正全面的响应式排版特别感兴趣，并且想要更详细地定制此样板，我强烈建议Jason Pamental撰写的 A More Modern Scale for Web Typography 。

翻译自: https://webdesign.tutsplus.com/tutorials/the-lazy-persons-guide-to-responsive-typography--cms-22822

正则表达式懒人