现在我们的迷你画廊已经准备好了。它可以在不同分辨率的屏幕上显示。至此，网站的自适应布局已成功进入一定阶段。
也讀吧！
《口碑营销：非比寻常的营销原则、方法和理念》
阅读更多
但这项工作尚未完成。
给出的例子清楚地表明了适配的一个显著缺点：在低分辨率的屏幕上，浏览器可能会出现滚动，或者图像太小。
网站页面主要包括三个区块：header（顶部header）、container-package和sidebar、footer（底部header）。我们来有条件地定义自适应设计的转折点，例如768和480像素。
我们使用第一点来隐藏标题，并在带 乔丹号码数据 有帖子的容器下方放置一个侧边栏。我们利用第二点来调整页眉元素的放置位置，取消页面列和代表社交网络的按钮的换行。
自适应网站布局_主页
元标记和 <head> 部分
让我们用最必要的文件补充 <head> 部分：所用字体的链接、jQuery 库。自适应网站布局涉及为页面属性编写浏览器前缀。为了避免这种情况，让我们添加 prefixfree 插件。
自适应网站 layout_meta 标签
页眉
我们将必要的容器元素 放在 页眉<header>中：
<a class="logo"> - 徽标；
<div class="nav-toggle"> - 显示/隐藏主菜单的按钮；
<ul id="menu"> - 主菜单；
form id="searchform"> - 站点搜索栏。
自适应网站布局_页面标题
包含文章简短摘要的区块
我们使用<article id="post-1" class="post"> 元素来包装文章公告。
自适应网站layout_block 附文章摘要
侧柱
我们使用<aside> 侧栏来放置类别列表、最新出版物以及用于注册新闻通讯的表格。
自适应网站布局_侧边栏
页脚
我们使用页面的页脚来显示版权信息，并且我们还会在那里放置社交媒体按钮和电子邮件链接。
自适应网站 layout_footer
常规 CSS 样式
常规浏览器样式并将其重置为默认值。
自适应网站布局_常规 CSS 样式
标题及其内容的样式
让我们设置页眉和页脚内容的样式。
自适应网站布局_页眉样式1
自适应网站布局_页眉样式2
主要内容块的样式
网站的自适应布局不应该“绕过”包含主要内容的区块。让我们为这个块设置样式。
自适应网站布局_块样式
自适应网站布局_block2 的样式
侧栏样式
选择并设置侧栏样式。
侧边栏自适应网站布局样式
侧边栏样式2
页脚样式
我们将页脚分成三列相等的列。
底部栏的自适应网站布局样式
媒体查询
自适应网站布局_媒体查询
自适应网站布局_媒体查询2
移动菜单脚本
自适应网站布局_移动菜单
我们已经在 </body> 页面标记中添加了 jQuery 代码，负责显示/隐藏顶部菜单（单击按钮重建菜单的高度，并根据内容进行调整）。
自适应网站上的文本应该是什么样的？
自适应页面上的文本应该易于阅读，并且应该有合适的字体。但是，只有在清楚了解访问者如何阅读互联网资源上的文本之后，您才能清楚地确定在这种特定情况下什么会很方便，什么不会很方便。
在执行网站自适应布局时，需要考虑到通常使用三种方法来读取互联网上发布的材料。
早在 2006 年，尼尔森诺曼集团就进行了一项独立研究，并发布了显示网页访问者行为的“热图”。这些图像显示了最受欢迎的区域（红色）、不太受关注的区域（黄色）和不可见的地方（紫色）。
自适应网站布局_热图
在图像中，您可以看到红色和黄色区域形成字母 F 的变体，这表明网络访问者只是扫描信息，确定其信息价值 - 这是他们第一次接触内容时感兴趣的全部内容。
此外，用户查看材料以了解给定的材料是否能解决手头的任务。通常，这种粗略的审查仅限于查看一行中的几个单词/字符。
请看下面的图片，这是用户浏览谷歌搜索结果时的眼球运动图。注意配色方案，它清楚地表明访问者只仔细阅读了第一个位置，然后扫描了信息（左侧部分绝对“不受目光影响”）：
自适应网站布局_Google热图
当然，用户可能对这些信息感兴趣并仔细阅读文本——在实现自适应网站布局时必须考虑到这种情况。如果一个人觉得某段内容有趣且有用，他就会“徘徊”在这段内容上，认真而缓慢地阅读。
阅读网页上发布的材料主要有三种方式，但值得考虑的是，还有更多方式。
自适应网站布局应该考虑所谓的“单独阅读”因素。其本质如下：访问者不会阅读页面上的所有内容，而是使用“中央”视觉停留在特定的单词处，并借助“周边”视觉了解更多信息。
网站页眉和主页的自适应布局
-
subornaakter40
- Posts: 252
- Joined: Tue Jan 07, 2025 4:25 am