1. 首页
  2. 问答
  3. 如何在重新调整屏幕时停止移动元素？

如何在重新调整屏幕时停止移动元素？

2014-08-27 66 views
0

即时通讯相当新的Html，CSS和IM目前正在做一个非常业余的网站，我碰到的问题是每当我尝试从全屏窗口缩小到非常小，一切都开始移动，即使我的导航栏变成垂直的某个点，它感觉有些部分没有“锁定”到位让我们说这样生病给你一个链接到我的网站，所以你可以看到自己也Html和CSS代码如下，任何想法如何解决这个问题？我已经尝试过搜索并添加以下代码，但没有任何更迭.. http://dwaight.magix.net/public/# 在此先感谢..如何在重新调整屏幕时停止移动元素？

HTML代码 

<body> 
<div class="container"> 
<div class="header"> 
    <h1 style="margin-top:0;">KYOTO INDUNSTIRES</h1></div> 
<ul div class="nav"> 
    <ul style="list-style: none; "> 
    <li><a href="#">Kyoto</a></li> 
    <li><a href="#">About us</a></li> 
    <li><a href="#">Contact us</a></li> 
    </ul> 
    </div> 

<div class="content">Hier komt de inhoud van de pagina. </div> 
<div class="footer">Hier plaats je de footer. </div> 
</div> 
</body>

CSS代码

.header h1 { 
    text-align: center; 
    font-family: "GatsbyFLF"; 
    font-size: 150px; 

} 
.nav { 
    font-size: 250%; 
    width: 100%; 
    float: left; 
    margin: 0 0 3em 0; 
    padding: 0; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; } 
.nav li { 
    float: left; } 
.nav li a { 
    font-family: "GatsbyFLF"; 
    display: inline-block; 
    padding: 15px 100px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #000000; 
    border-right: 1px solid #ccc; } 

.nav li a:hover { 
    color: #000000; 
    background-color: #fff; }

来源

2014-08-27 DwaightSkiiHD

回答

0

在你的容器div你应该把最小宽度。这样你的网站将会降低，直到达到最小宽度限制。

.container{ 
    min-width:1000px; 
}

希望它有帮助！

加上一个额外的：字体大小，你或许应该考虑避免百分比，并使用“EM”在必要的时候（1EM = 14px的）

来源

2014-08-27 23:47:40

+0

'1em'是'1em'，而不是'14px'。这是一个相对大小。除非你定义它，否则你永远无法说出这个尺寸是多少。 – Brad 2014-08-27 23:50:29

+0

是真的，但对于与像素大小的关系，大约是14px – 2014-08-28 00:08:59

+0

不，它不是！它与像素无关。如果您指的是默认大小，则完全取决于浏览器和设备。 – Brad 2014-08-28 00:09:56

0

可以宽度添加到容器

.container{width: 1200px;}

来源

2014-08-27 23:47:51

0

你需要给<nav>最小宽度：

nav{ 
min-width:1200px; 
}

See this fiddle
你的圣因为如果窗口足够大，元素只保持水平，但随着它变得越来越小，它们就会按照它们应有的流动。

来源

2014-08-27 23:48:21

0

打开你的开发工具，并找到事情开始出错之前屏幕的最大宽度（我认为这是约1100像素为您的网页）。然后在你的CSS代码添加：

html { 
    min-width: 400px; 
}

这将意味着，如果窗口宽度小于400个像素（更改为实际值之上制定了），那么该页面将只停留在400个像素，并使用水平滚动条。

虽然这会起作用，但它通常不被认为是最佳实践。查看http://css-tricks.com/css-media-queries/以获得更好的解决方案。

来源

2014-08-27 23:48:24 Zak

1

这里发生的事情是内容简单流畅。

你的元素重新定位自己是件好事。这使您的内容无论分辨率如何都可以看到。诀窍是让您的内容以受控的方式重新定位。

一个快速和肮脏的方法是简单地设置您的网站的外部容器的最小宽度。这可以用CSS来实现：

min-width: 60em;

真的不过，如果你这样做，用户将不得不滚动一边到另一边，看你的内容。通常最好让流程自行解决。如果你想额外控制，你可以看看CSS media queries，它允许你为不同的分辨率和条件设置不同的CSS属性。

来源

2014-08-27 23:49:51 Brad

相关问题

 相关问题