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

响应式网页设计是一种创建网站的方法,其中布局适应设备的屏幕 - 无论是手机,平板电脑,笔记本电脑,台式机,电视还是全息图。

这听起来像是一项艰巨的任务。我们有像BootstrapFoundation这样的CSSJavaScript框架为我们解决所有这些问题,对吧?

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

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

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

  • 基础 - 承重代码

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

  • 结构 - 网格系统

  • 导航 - 可折叠导航

可能的现实是,您甚至不需要框架所带来的一小部分。这些框架的文档非常庞大。如果您是一位经验更丰富的开发人员,您可能知道如何获取所需的部分并与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>

想让它成为语义?替换.containermainrow sectioncolumn articleaside。您的个人尺寸可以代表内容。

<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/

以上就是先忘记框架:理解响应式设计的基础知识的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » 头条

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏