先忘记框架：理解响应式设计的基础知识

这听起来像是一项艰巨的任务。我们有像Bootstrap和Foundation这样的CSS和JavaScript框架为我们解决所有这些问题，对吧？

好吧，也许吧。现在，不要误解我的意思 - 我认为框架是很棒的工具，可以在解决常见问题的同时大幅提高开发速度，而且所有这些都需要一点点创造力。如果你使用它们，那绝对没有错。

但是，如果您无法在没有框架的帮助下自信地组建响应式网站，那么您一定要考虑学习。了解幕后发生的事情非常重要。

在一天结束时，它真的不像看起来那么可怕。考虑最重要的方面：

• 基础 - 承重代码

• 断点 - 内容将在什么时候崩溃

• 结构 - 网格系统

• 导航 - 可折叠导航

可能的现实是，您甚至不需要框架所带来的一小部分。这些框架的文档非常庞大。如果您是一位经验更丰富的开发人员，您可能知道如何获取所需的部分并与LESS或Sass集成，但普通人只需要包含vanilla CSS和JS文件，并将它们覆盖在单独的文件中。

从头开始真正创建一些东西，并深入了解代码的工作原理以及如何操作代码，这是令人满意的。

基础

定义视口

在执行任何其他操作之前，您必须在HTML中定义视口的宽度。这将确保您的网站没有水平滚动 - 整个网站将可见，用户无需放大移动设备即可查看内容。

<meta name="viewport" content="width=device-width, initial-scale=1" />

包括浏览器重置

每个浏览器都会以不同的方式呈现内容。此外，有些人使用过时的浏览器。一些开发人员已经创建了样式表来解决这些问题。最广泛使用的两种是重置和标准化。两者之间的区别在于Reset完全消除了所有样式，而Normalize尝试为浏览器样式添加一致性。我更喜欢Normalize，因为你不必返回并重新设计每个元素。

规范化CDN

<link rel="stylesheet" href="css/normalize.min.css" />

重置边框

这是我强烈建议包括在任何项目中的重置之外的东西。如果您愿意，请阅读更多相关信息。它将使您的填充一致并防止沮丧。

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

包含jQuery（可选）

编写vanilla JavaScript可能很乏味。如果你愿意，可以包含jQuery。

jQuery CDN

<script src="js/jquery.min.js"></script>

CDN是指由大公司慷慨提供的样式表或脚本的链接，该公司将访问靠近客户位置的服务器上的文件。

断点

我们使用@media查询来定义断点。断点设置内容将折叠的像素宽度 - 当导航栏以某种方式变换时，网格将分解为单个元素。Google开发人员建议在内容上设置断点，而不是特定设备，我同意。

你可能听说过移动站优先。这个概念是，您构建的内容看起来非常适合移动设备，并从那里扩展。这是一个很好的合作理念。

这将对我们的代码产生的主要影响是我们将使用min-width查询，而不是max-width。无论您的移动设备样式是什么，都将在主样式表上，并且将添加更大设备的任何样式。

我喜欢保持简单，只有一个断点。我将首先创建所有手机，平板手机和平板电脑设备，并在@media查询中显示笔记本电脑，台式机和大屏幕。您的设计可能需要更具体，在这种情况下，您可以根据需要添加另一个断点。

/* Mobile first styles go here */

@media screen and (min-width: 800px) {
  /* Desktop styles go here */
}

解决此问题的最佳方法是将所有@media查询都包含在其等效代码旁边。

h1 {
  font-size: 1.5rem;
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 2rem;
  }
}

px，em或rem？这是一篇很棒的文章。通常，我建议仅将固定像素用于样式元素，em或者rem用于字体大小调整。

结构体

2006年，我们都在寻找圣杯 - 无处不在的三栏布局。十年后，情况发生了很大变化。我们期待一个适应性强的网格系统，而不是两个侧边栏充满了中间内容的链接。该网格系统可以轻松地处理“圣杯”，但它也是当前最少的文本，更少的链接，更少的页面，更多的图像，更多的滚动和大而粗的陈述的趋势的最佳选择。

Grid布局

您可能熟悉Bootstrap的网格，基于12列。

<div class="container">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

Foundation 也在12柱系统上运行。

<div class="row">
  <div class="medium-2 columns">2 columns</div>
  <div class="medium-10 columns">10 columns</div>
</div>

关于网格存在一些争议，因为它们通常不是语义的，并且它们的名称根据内容没有意义。但是，它们非常适合原型设计，如果您愿意，可以很容易地将它们转换为语义HTML5标记。但首先，我将以传统方式设置它，以便您可以看到它是如何工作的。

想要使用Flexbox布局模型而不是CSS浮动网格？这是一个如何在Flexbox中创建相同网格的教程。

请参阅Pen CSS Float Grid

我不想为我的网格使用固定的列数量。Foundation，Bootstrap和Skeleton都在12列网格上运行。如果您只打算使用5，或者需要15，那么这些系统很难修改。

考虑它的更好方法是将每一行视为100％的进度条。如果您只需要三列行，则可以创建33％宽度的类。如果您稍后决定要制作10列行，则将制作10％宽度类。如果您需要100列，则可以创建1％宽度的类。如果您想要75％宽度的内容区域和25％宽度的侧边栏，您也可以创建这些类。

我们希望背景颜色和样式跨越整个视口的宽度，但不是内容。通常需要将内容包含在固定宽度中以便易读。（想象一下，阅读一篇文章，例如，文本在iMac上是全宽的。）

.container {
  margin: 0 auto;
  padding: 0 10px;
  max-width: 1000px;
}

在.row类中创建。该行基本上是一个clearfix hack ; 没有样式应用于此元素。它只是存在以包含您的列。

.row::before,
.row::after {
  display: table;
  content: ' ';
  clear: both;
}

移动设备上的所有列均为全宽。

.one,
.one-third,
.two-thirds,
.one-fourth,
.half {
  width: 100%;
}

这里没有疯狂的计算或边距。感谢我们border-box之前的属性，课程的宽度将完全符合您的想法。您可以选择执行calc功能，也可以只编写百分比。最后，所有列都浮动到桌面左侧。

@media only screen and (min-width: 800px) {
  .one {
    width: 100%;
  }
  .half {
    width: calc(100% / 2);
  }
  .one-third {
    width: calc(100% / 3);
  }
  .one-fourth {
    width: calc(100% / 4);
  }
  .two-thirds {
    width: calc(100% / 3 * 2);
  }
  .column {
    float: left;
  }
}

这就是整个网格。

<div class="container">
  <div class="row">
    <div class="one column">Column</div>
  </div>
  <div class="row">
    <div class="half column">Half column</div>
    <div class="half column">Half column</div>
  </div>
</div>

想让它成为语义？替换.container为main，row 为section，column 为 article和aside。您的个人尺寸可以代表内容。

<main>
  <section>
    <article class="content column"></article>
    <aside class="sidebar column"></aside>
  </section>
</main>

导航

导航绝对是整个过程中最棘手的部分。有相当多的响应式设计导航几个常见的模式- off-canvas（滑动导航），全屏幕覆盖，或切换，仅举几例。大多数这种风格和更多的共同点是三线汉堡包菜单图标。不过，并不是每个人都认为这种比较好。

在设计布局时考虑您的内容非常重要。只是因为某些东西很时髦，并不总是意味着提供了良好的用户体验。如果您使用汉堡包菜单，我建议您在移动设备上突出显示您网站的主要标注。

之前，我写了一篇关于如何从头开始制作响应式下拉导航栏的文章。如果您想要从头到尾全面了解它的工作原理，我建议您阅读该文章。

请参阅Pen Responsive Dropdown导航栏

我还创建了一个没有下拉列表的简化版本，并用vanilla CSS编写。单击此处查看简化版。

结论

你可能需要在这里设置一些元素 - 即input类型，表格和按钮。第一次，如果您习惯使用框架，从头开始创建布局似乎有点压倒性。

对我而言，定制设计的最大吸引力在于易于创造。如果我想改变Bootstrap的导航栏以完全不同的方式工作，我会花费更多时间来覆盖样式，而不是从头开始创建自己的导航。了解您的代码可以让您充分发挥设计的作用。

英文地址原文：https://www.taniarascia.com/you-dont-need-a-framework/

以上就是先忘记框架：理解响应式设计的基础知识的详细内容，更多请关注0133技术站其它相关文章！