Question

我想让我的导航响应不断变化的屏幕尺寸。因此，当屏幕最小化为600或800px时，我希望导航移动到屏幕顶部，并可能被一个小的菜单图像取代。

我在这里是一个完全的初学者，这也是我在stackoverflow上的第一篇文章，所以我还在学习如何编写代码，并且非常感谢一些建议。

谢谢！

body{
	font-family: 'Lato', sans-serif;
	background-color: #f6be21;
	margin-right: 20px;
}

/* reset margin on all elements */

* {
	margin: 0;

}

.blurb{
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	text-align: left;
	width: 45%;
	color: #ffffff;
	list-style: none;
	float: left;
	margin-left: 60px;
	margin-top: 60px;
	position: absolute;
	padding-bottom: 100px;
}


.big-number-1{
	font-size: 70px;
	text-align: right;
	clear: both;
}

#main-header {
	text-align: right;
	width: 100%;
	float: right;
	position: fixed;
	bottom: 275px;
	height: 20px;
	right: 50px;
	clear: both;
}

.nav li + li:before{
	content: "/";
	padding: 0 9px;
	text-decoration: none;
}

ul.nav > li {
	display: inline;
	list-style: none;
	text-decoration: none;

}

ul.nav{
	list-style: none;
	display: inline;
}

h1.title{ 
	font-size: 53.34px; 
	color: #000000;
}

a.h1{
	text-decoration: none;  
}

a{
	text-decoration: none;
	color: #000000;
}

a:visited{
	color: #000000;
}

<header id="main-header">
        <h1 class="title"><a href="index.php">Chris Ioannou</a></h1>

        <ul class="nav">

            <li>
                <a>.01 about</a>
            </li>
            
            <li>
                <a href="read.html">.02 read</a>
            </li>
        </ul>
        
        <div class="big-number-1">
			<h3>.01<h3>
				
    </header>

Answer 1

以下是一个示例：..这会将标题移动到较小设备上的屏幕顶部。您可以在开发人员工具栏上的Google Chrome中查看此内容。

@media only screen
and (min-device-width: 375px)
and (max-device-width: 480px) {
   #main-header {
     top: 0px !important;
  }
}

Answer 2

有很多方法可以实现这一目标，但我强烈建议您深入了解HTML，CSS和JS 框架的精彩世界。我建议从 Bootstrap Framework （http://getbootstrap.com/）开始。它易于使用，并配有方便的组件。

例如， Navbar 组件，您可以使用该组件以不同的屏幕尺寸执行所需的菜单：

http://getbootstrap.com/components/#navbar

希望它有所帮助！

Answer 3

我删除了一个课程.blurb，我在html tags找不到该课程。 Second framework您可以通过responsive开展工作media query to style at different break points或使用background-color，因为我在您的代码中使用width来确定top之后@media screen and (max-width: 640px){ body{ background:red; } #main-header{ top:0; } } body{ font-family: 'Lato', sans-serif; background-color: #f6be21; } /* reset margin on all elements */ * { margin: 0; } .big-number-1{ font-size: 70px; text-align: right; } #main-header { text-align: right; width: 100%; float: right; position: fixed; bottom: 275px; height: 20px; right: 50px; clear: both; } .nav li + li:before{ content: "/"; padding: 0 9px; text-decoration: none; } ul.nav > li { display: inline; list-style: none; text-decoration: none; } ul.nav{ list-style: none; display: inline; } h1.title{ font-size: 53.34px; color: #000000; } a.h1{ text-decoration: none; } a{ text-decoration: none; color: #000000; } a:visited{ color: #000000; } @media screen and (max-width: 640px){ body{ background:red; } #main-header{ top:0; } } 1}}并将内容定位到<header id="main-header"> <h1 class="title"><a href="index.php">Chris Ioannou</a></h1> <ul class="nav"> <li> <a>.01 about</a> </li> <li> <a href="read.html">.02 read</a> </li> </ul> <div class="big-number-1"> <h3>.01<h3> </header>，如下所示，

_test

＆＃13;

_test = _test.split("\n")

＆＃13;

_test

＆＃13;

让我的导航响应

3 个答案: