Question

我希望在尺寸屏幕更改时重新定位一些元素，就像这里一样：http://jsfiddle.net/KAz2u/ 我左边有一个徽标，右边有一个导航工具栏，用于宽屏幕，我希望它们都出现在页面中间，用于小屏幕。

这是我的CSS代码的一部分

.logo{
  width: 70px;
  position: fixed;
  top: 15px;
  left: 30px;}

nav{
  position: fixed;
  right: 35px;
  top: 50px;
  font-family: "Brown-Regular";
  word-spacing: 3px;
  letter-spacing: 1px;
  font-size: 8pt;
  z-index: 1;}

@media(max-device-width: 480px){
.logo{
  position:relative;
  display: block;
  margin: 0 auto;
  top: 10px;
  left: 0;
  }

nav{
  position: relative;
  display: block;
  margin: 0 auto; 
  top: 50px;
  right: 0;
  word-spacing: 70px;
  }
}

这是我的HTML代码的开头：

<img class="logo" src="pics/logo.svg" alt="logo" />
<nav><a href="index.html">WORK</a>
<a href="mailto:">CONTACT</a> 
<a href="#infos">INFOS</a></nav>

不幸的是，它没有按照我想要的方式工作，元素没有居中，它们向左侧移动（在手机上）我不知道出了什么问题。谢谢您的帮助！

Answer 1

在媒体查询中使用max-width代替max-device-width

Answer 2

使用@media screen and(max-width: 480px){

应该有效

使用媒体查询重新定位元素

2 个答案: