Question

我遇到了一个问题，当我更改屏幕的分辨率时，div会转到右侧。我希望它能够做出反应，并且应该坚持到这个地方。

以下是一些快照

1024 X 786 （红色圆圈中的指定区域）

Screenshot

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

Screenshot

这是我的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%;
}

Answer 1

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

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

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

媒体查询不支持，即小于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]-->

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

在图标容器中，您可以通过

进行对齐

余量右：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%; }
}

一切顺利......

Answer 2

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

http://www.twitter.github.io/bootstrap/

Answer 3

我正在使用3个媒体查询，但它正在使用2个，即1280＆amp; 1024.但它现在不在1152上工作。这是代码

@media all和（max-width：1152px）{ .icons { 宽度：108px; margin-top：-42px; 位置：绝对的; 右：0像素; 余量右：11.5％; @media all和（max-width：1024px）{ .icons { 宽度：108px; margin-top：-42px; 位置：绝对的; 右：0像素; 余量 - 右：6.5％; @media all和（max-width：1280px）{ .icons { 宽度：108px; margin-top：-42px; 余量 - 右：6.5％; }}

如何在更改分辨率时使div响应

3 个答案: