5.合理内容和对齐项如何使用户遭受损失
当我们解决对齐问题时，我们喜欢使用对齐属性，如合理内容或对齐项目。但很少有人知道这些属性会导致数据丢失，尤其是在垂直对齐时。
这是因为这些属性的工作原理。此过程包括两个术语。第一，对齐容器是您声明对齐属性的一个元素。
第二，对齐主体是对齐容器内的元素。对齐属性会影响它们。
因此，当对齐主体的尺寸大于对齐容器的大小时，就会出现这种情况。在默认的对齐模式下，它会导致数据溢出和丢失。因此，用户将看到裁剪的元素。
我创建了一个具有模式元素的示例来显示此行为。起初，文本很短。但是，当我们使它更多，我们失去了标题和关闭按钮。
我们可以使用自动边距修复它，因为它使用额外的空间来对齐元素，不会导致溢出。看看元素是如何不再丢失的。
别这样
<div class="modal"> <div class="modal__main"></div> </div>
.modal { display: flex; justify-content: center; align-items: center; }
您可以使用此代替
<div class="modal"> <div class="modal__main"></div> </div> .modal { display: flex; } .modal__main { margin: auto; }
6.您使文本不可用
现在，我们经常使用自定义字体，使我们的界面看起来更加独特。自定义字体不在我们的系统中，因此我们必须加载它们，但这需要一些时间，问题是此时要显示什么。
默认情况下，浏览器在加载字体时等待，因此它不显示任何内容。但是，我们可以更改浏览器使用回退显示文本。
有字体显示描述符，根据是否下载并准备使用字体表脸来确定字体脸的显示方式。
我们可以使用交换值指示浏览器使用回退显示文本，直到自定义字体完全下载。
此技巧可帮助用户更快地开始与界面交互并实现其目标。
别这样
@font-face { font-family: "Baloo Tamma"; src: url("balotamma.woff2") format("woff2"), url("balotamma.woff") format("woff"); }
您可以使用此代替
@font-face { font-family: "Baloo Tamma"; src: url("balotamma.woff2") format("woff2"), url("balotamma.woff") format("woff"); font-display: swap; }
7.您的SVG图标会破坏您的界面
当您在 HTML 文档中使用 SVG 图标时，请注意设置宽度和高度属性。如果你不这样做，你依靠你设置的宽度和高度属性在CSS你的界面将被打破。
您的CSS可能未加载，此时，图标将尝试填充所有可用空间。所以错误发生了。只需设置宽度和高度属性，即可轻松入睡。您的接口将是防弹的！
别这样
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path fill="currentColor" d="..."></path> </svg> svg { width: 0.875rem; height: 1rem; }
您可以使用此代替
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="0.875rem" height="1rem"> <path fill="currentColor" d="..."></path> </svg>
8.您不需要为任何类型的设备使用重图像
我们的用户在查看网站时会面临过重的图像。如果他们有高速互联网不是一个重要的问题，但用户往往留在有互联网的问题。可能是地铁、大自然或者别的国家我认为我们必须帮助用户使用我们的应用程序。
好主意是帮助浏览器不加载沉重的图像与手机或其他移动设备。我想分享的解决方案，将做到这一点。
此解决方案称为图片元素，允许定义一组图像的源路径，以便浏览器可以加载设备最合适的图像。
例如，我们可以创建 2 个源元素并定义宽度介质功能以检测垫和桌面。此外，我们将使用手机的img元素。然后浏览器将选择最适合用户的图像。
注意，我使用移动第一的方法，所以如果图片没有浏览器支持或用户使用手机来显示小图像。
别这样
<img src="ferrari-1920x1080.jpg" alt="yellow ferrari F8 spider on the background of the ocean">
您可以使用此代替
<picture> <source srcset="ferrari-1200x960.jpg" media="(min-width: 641px) and (max-width: 1200px)"> <source srcset="ferrari-1920x1080.jpg" media="(min-width: 1201px)"> <img src="ferrari-640x480.jpg" alt="yellow ferrari F8 spider on the background of the ocean"> </picture>
1
2
3
4
5
6
7
8
9
10
11
此外，您还可以使用显示密度描述符和 scrset 属性来建议哪个图像更适合特定设备，同时考虑像素密度。
例如，如果手机的像素密度为 2 倍或更多，浏览器将使用 2x 描述器加载法拉利-640x480-2x.jpg图像。但是，如果它有1倍像素密度法拉利-640x480-1x图像将被加载。此外，此规则将适用于垫和桌面设备。
别这样
<img src="ferrari-1920x1080.jpg" alt="yellow ferrari F8 spider on the background of the ocean">
您可以使用此代替
<img src="ferrari-1x.jpg" srcset="ferrari-2x.jpg 2x" alt="yellow ferrari F8 spider on the background of the ocean"> <!-- or --> <picture> <source srcset="ferrari-1200x960-1x.jpg, ferrari-1200x960-2x.jpg 2x" media="(min-width: 641px) and (max-width: 1200px)"> <source srcset="ferrari-1920x1080-1x.jpg, ferrari-1920x1080-2x.jpg 2x" media="(min-width: 1201px)"> <img src="ferrari-640x480-1x.jpg, ferrari-640x480-2x.jpg 2x" alt="yellow ferrari F8 spider on the background of the ocean"> </picture>
9.缺少主要元素
每个网页都有主要内容，但开发人员会以某种方式忘记它。他们不使用主要元素。因此，辅助技术认为网页没有主要内容。
别这样
<div class="main-content">
<!-- main content is here -->
</div>
您可以使用它代替
<main class="main-content">
<!-- main content is here -->
</main>
10.使用标题太多
使用 h1-h6 元素进行副标题有一种不良做法。当您这样做时，您忘记了标题可以帮助屏幕阅读器的用户更快地在网页上导航。如果你有标题太多，它阻止人们。因此，在需要的地方使用标题。
别这样
<h2>iPhone 11</h2> <h3>Just the right amount of everything.</h3>
您可以使用它代替
<h2> <span>iPhone 11</span> <span>Just the right amount of everything.</span> </h2>
