手机优先导航设计.doc

手机优先导航设计在响应式网页设计中，手机优先导航是一个很有趣的活动。网站制作以完美适合移动设备而不是桌面是明智失误,你应该把它到你的日常工作流程。你可能第一次会面临两个问题，认为在大分辨率屏幕中比手机屏幕拥有更大的空间。让我们进一步讨论一下这个问题。手机优先对于桌面优先桌面设计和移动设计的最大区别是基本分辨率。当创建一个桌面优先方法的网站时，你有很多选择。您可以使用一些知名的建议和系统,如960像素,选择这个作为页面的宽度(max-width),或者你可以选择一些随机的宽度。处理这个决定的最好的方法之一来是考虑把内容填满它。如果你在制作一个内容丰富的网站,你可能会考虑更大的宽度，如1200 px。另一方面,在内容少的情况下,这样一个广大的宽度可以造成很多不必要的空白。总是要检查行长度是多少。为了提高可读性,每行保持在55 -60个字符的范围内。移动优先方法肯定没有处理这样的问题。你更有可能去考虑在哪里挤进最后一个段落或图像或在320 px显示器上如何显示多级导航。这些约束可以很难解决。当你为移动设备设计时，你的画面比在桌面小得多。你开始的宽度大约是320 px或480 px,包括更大的移动设备。在移动显示中，你必须仔细考虑每一个可用的像素。有时,你会决定改变整体布局。这不是什么坏事或要避免的。当你感觉这是件好事，那么旋转,改变或修改布局或网格系统都是可以的。这可能不会让你的客户高兴,但重要的是如果它的工作原理。这种布局和内容形式的考虑是移动优先方法的最大好处之一。这通常确实迫使你在做下一步行动之前仔细考虑的内容和有效形式。这是很好的方法，你应该使用它来创建你的设计适合的内容布局而不是别的。设置了解一些理论之后，让我们看看如何使用移动优先方法的例子。我们将看看有四个链接的导航设计。通常你(我也)会认为如何分配整个桌面页面链接比例。在这种情况下没有。现在,我们正在用320 px - 480 px(width-height)作为我们的设计基本分辨率。让我们设置HTML。HTML: Home About Catalog Contact Us 让我们首先为文档设置字体大小、粗细及类型。为此在CSS中选择body的元素。现在有两个选择。首先, 为所有属性使用三行,大小,粗细和属性。第二,只使用一个属性与速记值。后者更好和更快。所以使用字体属性值“300”、字体大小为“1 em”“、无衬线字体。除以所有空间。现在开始导航。你可以做的一件事就是隐藏导航“后面”一些图标。当用户将鼠标悬停于或点击图标,链接将出现垂直堆叠。这很容易做到。所以,body元素的字体大小设置为1em,列表的位置为相对(供后者使用:在class前),然后直接跳转到样式:伪类。在这里,设置位置为绝对。内容将被设置为代码栏的图标,可以发现，字体太棒了。要使得图标周围的空间大一点，让我们来设置顶部和底部的内边框为15 em，左边和右右边内边框为25em。背景我选择浅橙色- # ea764b，为了谐调,文本颜色为很浅的橙色- # f8d4c6。字体类型设置为font Awesome，这通过页面头部链接。最后是设置文本对齐为居中，图标位置居中。这就创建一个小橙白色盒子的图标。CSS:body font: 300 1em sans-serif;ul position: relative; z-index: 99;ul:before position: absolute; content: f0c9; padding: .15em .25em; font: 2.5em fontAwesome; text-align: center; background: #ea764b; color: #fff;为了解除图标悬停以便用户能够看到我们的图标链接,您将创建悬停的无序列表新规则。之前为:伪类。在这里,只是将内容设置为“(空白)。现在,当你鼠标离开图标,它将会消失。当你悬停在图标上，还要定义列表项规则，并让我们设置显示属性为“block”。 在用户鼠标经过时,这将显示您的列表 (下一步，你将设置样式列表项)。还有一件事要做。因为我们之前给图标使用的背景和内边框,现在必须重新设置这两个属性。否则,您将会在列表的左上角看小橙色正方形。重置:之前为伪类:悬停的无序列表,并将其内边框设为“0”和背景设为“none”。CSS:ul:hover:before content: ; padding: 0; background: none;ul:hover li display: block;现在我们将为列表项和锚标记定义样式。首先,列表项,让我们the width设置为“100%”(无序列表没有设置宽度,所以100%等于整个页面的100%)和预备显示值为none。CSS:li display: none; width: 100%;锚标签显示将被设置为“block”,所以，在列表的整个宽度上，链接将是可点击的,而不仅仅是文本的位置。在文本的上方和下方创造一些空间,并扩大个人链接,顶部和底部的内边框设置为“.5em”。背景颜色设为浅色橙- # ea764b，文本颜色为很浅的橙色- # f8d4c6。为了划分个人链接，让我们设置底部边界为1 em，实现，颜色为# ed8762 (5%的浅色橙)。为了对比和文本可见性,我们会将字体设置为“bold”,文本对齐为“居中”,文字修饰,“none”(类似于下划线)，文本转换为“大写”(是的,字体大小很重要)。为保持简单,悬停,只有把背景改变为之前使用的暗橙色# e76534。CSS:li a display: block; padding: .5em 0; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; background: #ea764b; color: #f8d4c6; border-bottom: 0.1em solid #ed8762;li a:hover background: #e76534;所以, 为移动显示，我们有不错的堆叠导航。改变成单行面板链接位置相邻，通过min-width属性，您将创建新媒体查询宽度大于481像素(手机屏幕上的分辨率结束为480 px)。在这个查询中,我们将使用最好的最快的解决方案flexbox。只是设置显示属性“flex”(我还包括前缀与部分浏览器支持)CSS:media screen and (min-width: 481px) ul display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 如果你想解除图标,只显示列表项(你应该),在媒体查询内设置内容属性:之前的无序列表” “(blank),n内边框设为“0”,然后列表项的显示属性设为“block”。CSS:media screen and (min-width: 481px) ul:before content: ; padding: 0; li display: block;现在你有简单和干净的充分响应的手机优先导航方法。如果你想为悬浮状态添加一个平稳的动画,您可以在锚标记上使用转换属性 (正常状态)，用“background.25”的值。首先是你想激活的CSS属性，第二定时(效果)。您还可以使用各种影响风格改