0

我遇到了一个问题，当我更改屏幕的分辨率时，div 会转到右侧。我希望它反应灵敏，并且应该坚持下去。

这是一些快照

1024 X 786（红圈指定区域）

截屏

但是在1152 X 864时，会发生这种情况

截屏

这是我的 HTML：

<div class="icons pull-right">
    <a href="#" style="">
        <img src="~/Content/images/emaar_home.jpg" />
    </a>
    <a href="#" style="">
        <img src="~/Content/images/emaar_contact.jpg" />
    </a>
    <a href="#">
        <img src="~/Content/images/arabic.jpg" />
    </a>
</div>

这是我的 CSS

.icons {
    width:108px;
    margin-top: -42px;
    margin-right:6.5%;
}
4

3 回答 3

0

使用媒体查询来控制响应式宽度设计

@media all and (max-width: 1152px){
.icons { 
  //here you can control class="ico"
 }
}

不仅是宽度，您还可以控制特定高度的屏幕..

媒体查询不支持ie小于ie9。我们只有一种方法..试试这个

第一次从下载这个 jquery 脚本

https://gitorious.org/css-media-queries-for-ie/css-media-queries-for-ie/blobs/master/css-media-query-ie.js

<!--[if lt IE 9]>
 <link rel="stylesheet" type="text/css" href="styles1.css" media="only all and (max-width: 480px)" id="stylesheet-480" />
 <link rel="stylesheet" type="text/css" href="styles2.css" media="only all and (min-width: 480px) and (max-width: 1024px)" id="stylesheet-1024" />
 <link rel="stylesheet" type="text/css" href="styles3.css" media="only all and (min-width: 1200px)" id="stylesheet-1280" />

 <script type="text/javascript" src="/js/css-media-query-ie.js"></script>
 <![endif]-->

还有一件事。在您的代码菜单和容器图像部分正确对齐，该图标部分只有问题。我认为您不需要使用媒体查询。你在图标部分犯了一些错误。如果你纠正了这一点，它在所有浏览器中都能很好地工作，即使是没有媒体查询的 ie6。如果你让我检查你的代码，我可以做到这一点。

在图标容器中，您对齐

保证金-权利：6.5%；

.icons {    
margin-right:6.5%;
}

检查您如何从右侧对齐顶部菜单和底部图像容器。

当您使用媒体查询时，您应该了解事情。你必须从高到低排序。像这样

@media all and (max-width:1280px) {
.icons { width:108px; margin-top: -42px; margin-right:6.5%; } 
}
@media all and (max-width:1152px) {
.icons { width:108px; margin-top: -42px; position:absolute; right:0px; margin-right:11.5%; }
}
@media all and (max-width:1024px) {
 .icons { width:108px; margin-top: -42px; position:absolute; right:0px; margin-right:6.5%; }
}

祝一切顺利...

于 2013-05-24T05:59:58.813 回答
0

更好地使用引导 css 进行响应式设计...这里是下载引导程序的链接...所有媒体查询都在那里...它会让您轻松...

http://www.twitter.github.io/bootstrap/ ‎</p>

于 2013-05-24T06:06:40.917 回答
0

我正在使用 3 个媒体查询，但它适用于 2 即 1280 和 1024。但它现在不适用于 1152。这是代码

@media all and (max-width:1152px) { .icons { width:108px; 边距顶部：-42px；位置：绝对；右：0px；右边距：11.5%；} } @media all and (max-width:1024px) { .icons { width:108px; 边距顶部：-42px；位置：绝对；右：0px；保证金-权利：6.5%；} } @media all and (max-width:1280px) { .icons { width:108px; 边距顶部：-42px；保证金-权利：6.5%；} }

于 2013-05-24T06:42:00.890 回答