HTML5自适应设计的必备技术

最新推荐文章于 2021-06-28 10:04:53 发布

cunjie3951

最新推荐文章于 2021-06-28 10:04:53 发布

阅读量484

点赞数

文章标签： python java 编程语言大数据 css

介绍

当平板电脑和智能手机首次出现时，许多发布者开发了截然不同的网站，或者至少截然不同地生成了HTML代码树，以为不同设备上的访问者定制体验。当然，出现了使它变得更容易的解决方案，例如此移动WordPress主题插件：

但是，要真正为所有设备上的访问者提供扎实的体验，大多数项目都需要重复或重复三次的设计，编码和测试工作。

响应式Web设计的概念旨在统一代码树，消除代码分叉并提供一种更简单的方法来跨设备提供高质量的用户体验。最初，它需要一些实验和一些早期的专业知识，但是今天，它已成为主流。这证明了围绕DRY工程的方向。

当我启动我的个人WordPress网站时，选择响应式设计仍然是一个飞跃，许多网站的访问质量会因访问者的体验而有所不同。

Twitter的Bootstrap开源版本极大地改变了网页设计的响应能力。可能像我一样，您在网站上运行响应主题，并且熟悉动态演示的一般概念。但是您知道响应式网页设计如何在后台运行吗？您知道如何从头开始构建响应式的东西吗？您想了解更多吗？

响应式网页设计的基因

在本教程中，我们鼓励您阅读Telerik关于响应式网页设计（RWD）的最新白皮书。您可以立即免费下载任何屏幕大小HTML5应用构建技巧，您可以立即免费下载，这些技巧提供了详尽详尽的指南，可以解答这些问题并帮助您快速入门。

响应式Web设计从被称为趋势到成为Web最佳实践的代名词的原因很多。这是一种为桌面和移动Web用户提供量身定制的体验的快速且经济高效的方法。您可以使用现有的技能，拥有一个代码库，一组URL和一种设计语言。

白皮书教您必须了解有关响应式网络实践的知识，以便可以针对任何屏幕尺寸构建应用程序。它教您如何：

利用响应式Web设计的基本构建块（网格系统，媒体查询和灵活的内容）来创建响应式布局，该布局根据访问者的设备进行更改，隐藏或显示项目
选择自适应网页设计框架，例如Bootstrap或Zurb's Foundation
使用先进的Bootstrap功能，例如流体容器，偏移量，推/拉等功能，甚至可以实现最复杂的响应式Web场景

在本教程中，我仅向您简要介绍该白皮书提供的内容。另外，我也参与以下讨论。如果您有任何问题或建议，请在@reifman上给我发表评论或鸣叫或直接给我发送电子邮件。

以下是白皮书将教您的一些领域。

媒体查询

媒体查询是CSS3的一部分，它们使响应式Web设计成为可能。

本质上，媒体查询可以帮助浏览器告诉CSS代码中的条件代码如何设置样式，隐藏或显示内容元素。

这是一个示例，其中最小的设备尺寸最多为一个宽度大于768 px的设备：

/* Base style for small devices small and up */

.hero-text { font-size: 22px; }

/* For large and up */

@media only screen and (min-width: 768px) { 

    .hero-text { font-size: 48px; }

}

诸如Bootstrap，Foundation和Telerik RadPageLayout之类的流行框架广泛使用了媒体查询来创建其强大的网格系统。

网格和断点

使用代码中的媒体查询，您可以构建带有可对设备进行流畅响应的网格的样式表，从而根据访问者的设备和浏览器的宽度动态调整访问者看到内容的方式和方式。

语法在框架之间可能有所不同，但是一般概念是相同的。每个设备尺寸都有相应的媒体查询和样式属性，这些属性可创建所需的布局效果。这些媒体查询称为断点。 Bootstrap将其断点标识为xs（超小），sm（小），md（中），lg（大）。这些是指设备的大小。

以下是一些Bootstrap示例，以及它们在不同大小的设备上可能呈现的内容：

<div class="col-sm-12 col-md-6 col-lg-4"> <!-- some navigation -->

</div>

<div class="col-sm-12 col-md-6 col-lg-8">

<!-- some content -->

</div>

左上方是小型设备和较小的平板电脑，右上方是中型设备。较小的是较大的设备和台式机。

另一个常见的概念是基本内容容器。容器元素是布局的最外面的元素。其目的是在布局和浏览器窗口边缘之间创建空白。

处理内容

白皮书还向您展示了响应式Web设计，它根据访问者的显示大小指示内容进行扩展或收缩：

选择框架

我相信选择标准对成功开发软件至关重要。它可以帮助团队进行交流，并允许新人们Swift上手。这使招聘人员更容易了解他们在标准技术中的技能。随着时间的推移，它使安全性，性能和功能的升级变得更加容易，尤其是在使用开源技术时。

在响应式Web设计中选择标准框架可以对项目的成功或失败产生巨大影响。 Telerik白皮书将引导您了解最受欢迎的Bootstrap之一的优缺点：

Bootstrap提供一流的功能，例如可靠的响应网格，移动优先设计，CSS帮助器类，自适应JavaScript组件等等。默认情况下，该网格是标准的12列网格，具有用于创建支持多种屏幕尺寸的布局的简单语法。

白皮书还重点介绍了Zurb Foundation。这是从Bootstrap演变而来的开源框架。

Foundation包含高级功能，适合具有经验丰富的前端开发人员（尤其是使用Sass的团队）的团队。

进阶版面配置功能

白皮书还涉及许多高级主题：

液体容器
嵌套行
偏移量
推拉

不用赘言，它为我们大多数人提供了您需要了解的最重要方面的非常详细的介绍。

立即下载白皮书！

希望我对您很感兴趣，以便您想了解更多。作为一个定期管理在这些问题上具有专业知识的人员的项目经理，我发现这是响应式Web设计及其工作方式的超级易懂指南。

想潜水吗？访问Telerik的白皮书集，立即下载构建任何屏幕尺寸HTML5应用程序的必备技术。

还有一件事...

这些响应式框架是重要的起点，并且包括用于启动项目的UI组件。这些组件通常包含操作和构建原型所需的基本功能。但是，您更高级且功能齐全的应用程序需要更强大的用户界面功能。很快，您正在寻找一种与Web兼容的响应式UI套件。

Telerik Kendo用户界面

Telerik Kendo UI具有响应式网格，图表，计划程序等，这些组件可与您使用的任何响应式Web设计框架无缝地协同工作。它是由我们的赞助商制作的，该赞助商在上面创建了RWD白皮书。

我只想让您快速浏览Kendo UI的期望：

格网

构建高级交互式网格控件绝非易事。 Kendo UI开箱即用地提供了强大而灵活的网格：

排程器

有时间表（或日历）视图：

图表

Kendo UI包含内置图表：

编辑

还有一个功能丰富，易于配置的编辑器：

小部件

实际上，这里有一个库，其中包含另外73个UI小部件：

下一步是什么？

基本上到此为止，您有两件事要做：

下载构建适用于任何屏幕尺寸HTML5应用程序的必备技术，以了解响应式Web设计和框架。
注册Kendo UI Framework免费试用版，然后开始下载代码。

我希望您对TelerikHTML5白皮书（以及Kendo UI框架）可以提供的功能感兴趣。请随时在下面发布您的经验以及问题和评论。您也可以在@reifman上向我发送推文，或直接给我发送电子邮件，并浏览我的Envato Tuts +讲师页面以查看我编写的其他教程。