固定标题和响应网站问题 [英] Fixed header and a responsive website issue
问题描述
我一直在试图创建一个具有固定标题但也响应的网站。这是我到目前为止。我会坚持在一个jsfiddle，但你不能看到我想解释的。 .css 在 .scss 格式中为 .css 已压缩。
I have been trying to create a website with a fixed header but which is also responsive. Here is what I have so far. I would stick it in a jsfiddle but you can't see what I am trying to explain. The .css is in the .scss format as the .css is compressed.
HTML：
HTML :
<title> Skinny Beer </title>
<meta name="description" content="/">
<meta name="author" content="Josh Hornby">
<meta name="author" content="@joshua_hornby">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
</head>
<body>
<div class="container">
<nav id="main-nav">
<div id="nav-wrapper">
<div class="six columns"
<div id="logo" style="background-color:black;"></div>
</div>
<div class="ten columns">
<ul>
<span class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Beer</a></li>
<li><a href="index.html">Contact</a></li>
</div>
</div>
</nav>
CSS：
#main-nav{
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-webkit-transition: box-shadow 0.2s linear;
-moz-transition: box-shadow 0.2s linear;
-ms-transition: box-shadow 0.2s linear;
-o-transition: box-shadow 0.2s linear;
transition: box-shadow 0.2s linear;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: block;
position: fixed;
top: 0;
left: 0;
float: left;
width: 100%;
z-index: 12;
height: 60px;
background-color: white;
ul {
position: relative;
margin-top: 10px;
}
li {
vertical-align: middle;
display: inline;
margin: 0 2px;
color: black;
list-style-type: none;
}
a {
text-decoration: none;
}
}
#nav-wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#logo {
height: 25px;
width: 118px;
display: inline-block;
float: left;
padding: 5px 10px;
margin-top: 11px;
margin-left: -13px;
}
我后面是当用户在iPhone上时，缩小和文本不下降。我需要使用媒体查询吗？
What I am after is when the user is on an iPhone lets say the nav shrinks downs and the text doesnt drop below. Will I have to use media queries? If so is there a quick way to do them for all devices?
推荐答案
是的，您需要使用媒体查询。不知道如何写一个响应式网站没有他们，除非你在js这样做，这将是疯了。
Yes, you will need to use media queries. Not sure how you would write a "responsive" site without them unless you were doing it all in js and that would be insane.
查看此链接了解更多详情：
http://css-tricks.com/ snippets / css / media-queries-for-standard-devices /
Look at this link for better details: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
但这里有个想法：
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#nav-wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 480px;
}
}
＃nav-wrapper width of 480px;响应的一般想法是从移动设备上来。但是我给出的链接会向你解释所有这一切。
So on smaller screens you get a #nav-wrapper width of 480px; The general idea of responsive is to design from mobile up. But the link I gave will explain all of that to you.
此外，示例代码没有内容块或在示例中重新定义。但假设你有一个名为main_content的div，你可以告诉它有一个margin-top，以便它将清除标题，nav或任何其他你得到的方式。我认为在这种情况下，实际的例子不像主体那样必要，因为我们可以填满整个页面，涵盖所有设备和尺寸的可能性。最好的方法是让你的手变脏和练习。这真的不难习惯。
Also, your sample code doesn't have a content block or anything to redefine in an example. But supposing you have a div called "main_content" you could tell it to have a margin-top such that it will clear the header, nav or whatever else you have getting in the way. I think in this case, real examples aren't as necessary as the principal since we could fill up the whole page covering all devices and dimension possibilities. Best way to do it is to get your hands dirty and practice. It's really not hard to get used to.
对于一个快速的方式来覆盖amm，像is_mobile...不，不要尝试做那。正如最近有人指出，移动的定义每天都在改变。尝试定位移动设备只是为了保持一个大混乱。
As for a quick way to cover the amm, like a "is_mobile" ... no, don't try to do that. As someone pointed out recently, the definition of "mobile" is changing daily. Trying to target "mobile" is just going to make a big mess trying to maintain that.
你可以写一个媒体查询max-width 768px如果你不
You could write one media query for max-width 768px if you don't care if they are on a mobile device or not, just to make a small view.
@media only screen and (max-device-width : 768px)
{
/* styles here */
}
这篇关于固定标题和响应网站问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
