Question

我为我的项目设计了一个网页，当我在网络资源管理器中查看图像位置和桌面位置时，所有内容都没有正确对齐。即使我试图导入reset.css文件（eric的最新版本）。这给出了所有页面的不正确的对齐表。

基于用户代理加载css是否合适？

   if ie:
      <link ....</link>
   else:
      <link>...</link>

该怎么做？

另外，如何调整应在所有分辨率屏幕上采用的布局？

当我使用12-15英寸分辨率的屏幕时，我的页面看起来很好。有些宽屏幕看起来不太好。

应如何处理它？</ p>

提前致谢。

Answer 1

<!--[if IE 8]>
        <link rel="stylesheet" href="css/ie8.css"/>

<![endif]-->

stylesheet for ie

您可以使用媒体查询调整布局，您可以选择哪种分辨率

类似

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

media queries

Answer 2

您可以将conditional comment用于IE浏览器。写得像这样：

<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css"/>
Special instructions for IE 8 here
<![endif]-->

阅读此内容以获取更多http://www.quirksmode.org/css/condcom.html

Answer 3

使用CSS Conditional Comments，您可以定位浏览器。

通过在<HTML>页面中添加以下行，您可以定义特定于浏览器的样式表或java脚本文件。

适用于IE浏览器

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

适用于非IE浏览器

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="css/non-ie.css" />
<!--<![endif]-->

使用Media Queries，您可以通过定位所需的屏幕分辨率来创建自适应网站的布局。

@media screen and (max-width: 699px) and (min-width: 320px) {
   div { background: blue; width: 100px; height: 100px; }
}


@media screen and (max-width: 1024px) and (min-width: 700px) {
   div { background: green; width: 300px; height: 100px;  }
}


@media screen and (max-width: 1280px) and (min-width: 1025px) {
   div { background: red; width: 600px; height: 100px;  }
}

EXAMPLE FIDDLE

您可以详细了解How to use Media Queries

如何根据浏览器加载CSS？

3 个答案:

使用CSS Conditional Comments，您可以定位浏览器。

使用Media Queries，您可以通过定位所需的屏幕分辨率来创建自适应网站的布局。