响应式移动端框架_简单，响应式，移动优先导航

最新推荐文章于 2022-08-02 09:39:22 发布

daique1908

最新推荐文章于 2022-08-02 09:39:22 发布

阅读量574

点赞数 1

文章标签： css java python html 人工智能

响应式移动端框架

我们将构建一个简单的响应式网站导航。我们的解决方案将帮助我们强调页面的内容，可以说是设计移动设备时的重中之重。不会涉及JavaScript，我们将通过Mobile First方法解决它。

什么是移动导航？

如果您已阅读Luke Wroblewski的《移动优先》，您将熟悉他的陈述：

“通常，内容优先于移动设备上的导航。”

他的意思是，移动用户经常在寻找即时答案。他们想要他们要搜索的内容，而不是更多的导航选项。

许多站点，甚至是响应站点，都遵循导航属于任何给定页面顶部的约定。这种方法可能会在移动设备上引起可用性问题，因为移动用户通常缺少两件事：屏幕空间和时间。如果主要的移动导航位于页面顶部，则很有可能会遮盖整个屏幕。

大型的触摸式菜单链接进一步加剧了该问题，迫使用户滚动到导航之外，以获取任何有价值的内容。

以London＆Partners为例：

完美的响应式设计，但是在标准移动视口尺寸（320像素x 480像素）下，您真正看到的只是一个导航菜单。当然，刚到达首页后，我还想看到其他内容吗？证明这一点的不仅是伦敦和合伙人。在网络上的许多响应式设计中都可以看到这种做法。

那么，有什么解决方案？

我们已经看到了几种解决方法，通常依靠jQuery为我们解决问题。请看Chris Coyier对“ 五个简单步骤”响应式下拉菜单的说明。

使用jQuery，以<select>下拉菜单的形式创建菜单的副本，最初使用CSS将其隐藏在视图中。媒体查询检测到较小的屏幕时，它们使下拉菜单可见，而原始导航不可见。这对于移动设备来说是完美的选择，因为下拉菜单占用的空间很小，并且可以使用设备的特定UI（例如iPhone的滚动条）。

或者，您可以隐藏导航，但是单击菜单按钮时可以将其转换为视图。您可以在最新的Bootstrap中看到这种效果。

较小的屏幕会隐藏导航链接，并显示一个“列表”图标（Swift被接受为“菜单”的意思），单击该图标可显示导航。同样，向移动访问者展示了尽可能多的内容，但是如果他们需要，可以使用导航选项。

纯CSS移动导航解决方案

我们将使用Luke讨论的技术，该技术利用CSS和Mobile First方法。移动优先方法是什么意思？简而言之，我们将设计一个简单明了的移动版式，然后逐步增强大屏幕的设计。我们将使用媒体查询来检测不断增长的屏幕尺寸，添加样式和功能。

这意味着当使用移动设备查看我们的设计时，将仅加载最少CSS和资源。这也意味着较旧版本的IE（无法识别媒体查询）将随移动网站一起显示。有关更多信息，请查看Joni Korpi的Leaving Old Internet Explorer Behind 。

1.标记

我将逐步解释该解决方案背后的想法，因此暂时让我们一起整理一些标记，从一个空白HTML5文档开始。

<html lang="en">
<head>

	<meta charset="utf-8">
	<title>Mobile First Responsive Navigation</title>
	<meta name="description" content="CSS only mobile first navigation">
	<meta name="author" content="Ian Yates">

	<!--Mobile specific meta goodness :)-->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!--css-->
	<link rel="stylesheet" href="styles.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons-->
	<link rel="shortcut icon" href="img/favicon.ico">

</head>
<body id="home">

	
</body>
</html>

注意： 不要忘记视口元标记！

完成此操作后，我们将添加一些页面结构。简单明了的东西，所有这些都是为了演示的目的。我使用了Monty Python的Holy Grail的填充文字（感谢Chris Valleskey ），这是一种在工作时在脸上露出笑容的好方法:)

<body id="home">

	<div class="wrapper">
	
		<header>
		
			<h1 class="logo"><a href="">Nav</a></h1>
		
		</header>
		
		<article>
		
			<h2>Blue. No, yel&hellip;</h2> 
			
			<p>Shut up! Will you shut up?! But you are dressed as one&hellip; Camelot! You don’t vote for kings.</p> 
		
		</article>
		
		<article>
			
			<h2>We want a shrubbery!!</h2> 
			
			<p>Look, my liege! Shut up! But you are dressed as one&hellip;</p> 
			
			<ul> 
				<li>The nose?</li> 
				<li>Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!</li> 
				<li>Look, my liege!</li> 
			</ul> 
		
		</article>
		
		<article>
			
			<h2>Help, help, I’m being repressed!</h2> 
			
			<p>Why? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Be quiet! A newt?</p> 
		
		</article>
		
		<footer>
		
			<p>Copyright &copy;2012 Ian Yates <a href="http://webdesign.tutsplus.com">Webdesigntuts+</a></p>
		
		</footer>
	
	</div><!--end wrapper-->
	
</body>

2.导航标记

我们整理了一个基本的html页面，现在是时候吸引大家了。我们的主要导航

<nav id="primary_nav">
		
	<ul>
	
		<li><a href="">Portfolio</a></li>
	
		<li><a href="">About Me</a></li>
	
		<li><a href="">Nonsense</a></li>
	
		<li><a href="">Services</a></li>
	
		<li><a href="">Contact</a></li>
	
		<li><a href="#home">Top</a></li>
	
	</ul>

</nav><!--end primary_nav-->

是的，您已经正确看到了，我们在上一篇文章之后的第68行中添加了它。不要忘记我们现在正在为移动设备设计，稍后我们将介绍台式机。我们已将导航放置在页面的底部，以便完全避免干扰。现在，我们将在页面顶部放置一个链接，以便用户可以根据需要找到导航。

<header>
		
	<h1 class="logo"><a href="">Nav</a></h1>
	
	<a class="to_nav" href="#primary_nav">Menu</a>

</header>

3. CSS重置

根据您通常开始Web项目的方式，此步骤与您通常的工作流程不同。我总是发现埃里克·梅耶（Eric Meyer）的重做是工作的坚实基础，尤其是在他最近对其进行了调整时。我们将他的重置规则添加到样式表中，以开始我们CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: ’’;
	content: none;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

4.基本样式

目前，我们的页面看起来毫无启发。

..so让我们通过添加一些简单的样式来改进它们。

/*begin our styles*/

body {
	font: 16px/1.4em ’PT Sans’, sans-serif;;
	color: #1c1c1c;
}

p,
ul {
	margin: 0 0 1.5em;
}

ul {
	list-style: disc;
	padding: 0 0 0 20px;
}

a {
	color: #1D745A;
}

h1 {

}

h2 {
	font-family: ’PT Serif’, serif;
	font-size: 32px;
	line-height: 1.4em;
	margin: 0 0 .4em;
	font-weight: bold;
}

/*layout*/

.wrapper {
}

article {
	border-bottom: 1px solid #d8d8d8;
	padding: 10px 20px 0 20px;
	margin: 10px 0;
}

/*header*/

header {
	background: #1c1c1c;
	padding: 15px 20px;
}

		/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
		header:before,
		header:after {
		    content:"";
		    display:table;
		}
		
		header:after {
		    clear:both;
		}
		
		/* For IE 6/7 (trigger hasLayout) */
		header {
		    zoom:1;
		}

h1.logo a {
	color: #d8d8d8;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 22px;
	float: left;
	letter-spacing: 0.2em;
}

a.to_nav {
	float: right;
	color: #fff;
	background: #4e4e4e;
	text-decoration: none;
	padding: 0 10px;
	font-size: 12px;
	font-weight: bold;
	line-height: 22px;
	height: 22px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

a.to_nav:hover,
a.to_nav:focus {
	color: #1c1c1c;
	background: #ccc;
}

这些都是基本的东西（字体，行高，颜色等），到目前为止，至关重要的是我设置了“菜单”按钮的样式，使其浮动到<header>的右侧，您经常会在其中导航被发现。

如果将鼠标悬停在其上，您将看到悬停状态-当然对于触摸屏设备而言不是必需的，但是这种体验也将提供给不合作的Internet Explorer版本。我们已经为移动用户的利益定义是:focus状态。它与:hover状态相同，但是将为触摸屏设备提供关键的反馈。我们的用户将知道他们已经成功地触摸了菜单按钮。

无论如何，单击它，您将被带到导航栏中，超级。

现在让我们对菜单进行一些样式设置。

5.导航样式

实际上，我们将像之前显示的London＆Partners示例那样设置主要导航的样式，但这次显然在页面底部。

/*navigation*/	

#primary_nav ul {
	list-style: none;
	background: #1c1c1c;
	padding: 5px 0;
}

#primary_nav li a {
	display: block;
	padding: 0 20px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	letter-spacing: 0.1em;
	line-height: 2em;
	height: 2em;
	border-bottom: 1px solid #383838;
}

#primary_nav li:last-child a {
	border-bottom: none;
}

#primary_nav li a:hover,
#primary_nav li a:focus {
	color: #1c1c1c;
	background: #ccc;
}

/*footer*/

footer {
	font-family: ’PT Serif’, serif;
	font-style: italic;
	text-align: center;
	font-size: 14px;
}

好多了。我们已经使菜单链接变得美观大方了（在Luke Wroblewski自己的博客上了解有关“ 触摸目标尺寸”的更多信息），并再次确定了:focus状态供用户反馈。

同样很明显，我们包含了一个“顶部”链接，如果需要的话，该链接会将用户带回到页面顶部。

6.变得更大

好的，我们已经处理了简单的移动布局，现在是时候进行一些渐进式增强了。我们将使用媒体查询来确定何时不再适合我们的移动版式。

但是什么时候变得不合适呢？处理媒体查询的方法有很多，但我们将基于移动视口为320px x 480px的基础进行工作。纵向查看时宽为320px，横向查看时宽为480px，因此我们可以合理地设置第一个媒体查询以检测任何大于480px的屏幕。

但是，下一步可以说是平板电脑。 iPad的分辨率为980px x 768px，因此我们可以放心地假设任何小于768px的尺寸都适合我们的移动版式。任何大于768像素的像素都可以处理更多类似桌面的导航布局。

因此，我们可以开始添加规则，因此让我们设置一个媒体查询：

/*media queries*/

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

}

当视口宽度至少为768px时，此媒体查询将运行其中包含的所有样式。请注意，其中包含了only关键字，以确保Internet Explorer 8不会引起混乱，并尝试处理查询。有关详细信息，请参见我之前的解释。

让我们通过使“菜单”按钮消失来开始事情：

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

	a.to_nav {
		display: none;
	}

}

随着浏览器稍微变宽，菜单按钮将不再显示。

7.转移导航

现在，我们需要将主要导航置于页面顶部。为此，我们将其从文档流中删除，并将其绝对定位在顶部。

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

	a.to_nav {
		display: none;
	}
	
	.wrapper {
		position: relative;
		width: 768px;
		margin: auto;
	}
	
	#primary_nav {
		position: absolute;
		top: 5px;
		right: 10px;
		background: none;
	}
	
	#primary_nav li {
		display: inline;
	}
	
	#primary_nav li a {
		float: left;
		border: none;
		padding: 0 10px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}

}

为了使之成为可能，我们首先必须使其父级（ .wrapper ）相对定位。我们可以在媒体查询中执行此操作，也可以在样式表的开头进行确定。

绝对放置好菜单后，我们需要删除一些锚定样式。不需要做很多事情，但是我们需要列表项以内联方式显示，并且需要从锚点删除边框和过大的填充。当然，我们之前指定的悬停状态很好，因此我们不需要更改它们。

8.最后一件事

如果您一直在注意，您会注意到导航中仍然有一个“顶部”链接-我们真的不需要了吗？

我们可以通过多种方法删除它，但是我们可以确定发生了什么，我们首先将一个类添加到列表项中：

<li class="top"><a href="#home">Top</a></li>

然后我们可以在媒体查询中删除它：

#primary_nav li.top {
	display: none;
}

结论

而已！有很多方法可以基于此想法（将列表图标仅实现为一个），当然，您可以继续添加媒体查询来满足不断增长的屏幕需求。

希望您现在有这样做的基础。我们从移动优先的角度出发，创建了一种简单，易于触摸的响应式导航，同时强调了内容和可用性。谁可以要求更多？

本教程中提到的一些有用链接，全部链接在一个方便的列表中：

Envato市场上有大量的移动优先设计模板，可立即在您的项目中使用。

翻译自: https://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074

响应式移动端框架

daique1908

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫