无需框架即可构建响应式网站

什么是响应式 Web 开发？

摘要：响应式设计是 Web 开发的基础。面对多种设备和屏幕分辨率，您需要构建一个能够在所有屏幕上流畅运行的网站。在本文中，我将带您了解在不使用框架的情况下构建响应式网站时必须考虑的五件事。

响应式网页开发是一种网页设计方法，旨在使网页在各种设备和屏幕尺寸上都能良好呈现。网页开发已经不再局限于为电脑设计静态页面。现在，您的网页和应用程序必须支持多种设备视口；而设备视口的数量非常多。

每个前端开发者都听过或读过上面这些话很多次。响应式 Web 开发是我反复听到的最早的话题之一。然而，我被介绍使用 Bootstrap 是为了实现响应式。

CSS 框架有很多，但 Bootstrap 是我最喜欢使用的框架之一。我所有的项目，包括基于 React 的项目，都使用了 Bootstrap 来实现响应式开发，直到我意识到自己过度依赖它。此外，在小型项目中，Bootstrap 可能会有很多依赖项。

在不使用框架、仅使用 HTML 和 CSS 构建完全响应式网站的过程中，我发现了 5 件至关重要的事情，可以使网站具有响应性并且开发不那么混乱。

与普遍的看法相反，这并不是守门人。移动优先的设计确保你能够在较小的屏幕上获取尽可能多的信息。当屏幕放大时，组件也会随之放大。然而，如果你优先为桌面端设计，那么大多数组件在缩小到较小尺寸的屏幕时就会显得格格不入。

作为一项挑战，你应该复制一个简单的落地页。先构建移动端，然后再构建桌面端，看看哪个更容易扩展。

我用于定义网页整体布局的关键词是：

width: 90%;
margin: 0 auto;

宽度确保网页上的所有内容与屏幕尺寸的边框保持一定的宽度。边距将网页内容设置为与屏幕宽度的中心对齐。

您可以根据需要调整宽度。

确保使用百分比来定义宽度，这是因为百分比是流动的并且会根据设备视口的大小进行调整。

作为一项挑战，你应该为上面创建的落地页添加宽度和边距。这样可以使页面的缩放更加流畅。

Rems 和 Ems 是尺寸单位，就像像素和百分比一样。Rems 和 Ems 是相对单位，在定义字体大小、边框、内边距等时更常用。

但它们非常不同。

Em 与其直接或最近的父级的大小有关，而 Rem 仅与 html（根）字体大小有关。

.body{
font-size: 14px;
}

.container{
width:50%;
background-color:red;
font-size: 1.5em;

h1{
font-size: 3em;
}

}

h1{font-size:3rem;}
h1{font-size:3em;}

作为一项挑战，运行这两个代码或其变体。

两个 h1 的尺寸会有所不同。em 单位相对于其父元素（容器）计算；h1 的尺寸将是容器尺寸的三倍。
而 rem 单位相对于 body 计算，而不是相对于父元素。

当使用单位时，您想知道何时使用哪个单位以避免级联效应。

Grid 和 Flex 是构建网页布局的强大工具。快来使用它们吧！

我发现 Bootstrap 网格和 CSS 原生网格以及 Flex 非常相似，就再也不想用了。事实上，我发现 CSS 网格更简洁、可定制，而且没有依赖项。

如果由于某种原因，我必须使用 Bootstrap 框架，那么它肯定不适合布局。

当我开始编写不使用框架的响应式设计时，我到处使用媒体查询。

@media and screen(max-width: 500px){
//
}

@media and screen(max-width: 320px){
//
}

@media and screen(max-width: 480px){
//
}

这真是一团糟，这就是我把它留到最后的原因。

说到响应式设计，媒体查询是必不可少的。但是，如果您注意到以上几点，就不需要在每个断点都使用媒体查询了。相反，它们应该谨慎而具体地使用。例如，屏幕从手机切换到平板电脑，再从平板电脑切换到笔记本电脑，再从笔记本电脑切换到电视。并非适用于所有品牌的 iPhone 视口。

熟悉 width 和 max-width 的用法。width 可用于设置屏幕宽度，max-width 可用于设置更大屏幕的宽度，两者在同一个代码块中即可实现。两者互不影响。

加分点：避免为图片设置固定的宽度和高度。无论设置宽度还是高度，图片都能很好地缩放，响应速度也更快。设置宽度和高度会使图片变形，导致响应速度变慢。
小贴士：使用百分比来定义宽度。