html - 移动 web 应用程序的 css 放置图标

Question

我正在尝试使用 CSS 为移动网络应用程序放置图标。 但是我对此有一些问题。 我设置了外框并在那里放置了图标，我认为这对不同的设备有好处，因为它们有不同的尺寸

下面是我的代码，但我没有看到图标 我在这里遗漏了什么吗？

This is my html

<link rel="stylesheet" type="text/css" href="/mobile_pages/main/main_page.css"/>
<br>
<div id="siteMenu">
   <a href="/index.php?mid=s11" class="icon" id="intro_icon">  </a> 
   <a href="/index.php?mid=s15" class="icon" id="direction_icon">  </a> 
   <a href="/index.php?mid=s56" class="icon" id="pic_icon">  </a>    
   <a href="/index.php?mid=s21" class="icon" id="news_icon">  </a>    
   <a href="/index.php?mid=s31" class="icon" id="movie_icon">   </a> 
</div>

This is my css
#siteMenu{
  position: relative;
  width: device-width;
  height: device-height;

}

.icon{
  background-size: cover;
  width: 80px;
  height: 80px;
}

#intro_icon{
  position: absolute;
  background-image: url('intro_icon.png');
  top: 50px;
  left: 0px;
}

#direction_icon{
  position: absolute;
  background-image: url('direction_icon.png');
  top: 50px;
  left: 90px;
}


#pic_icon{
  position: absolute;
  background-image: url('pic_icon.png');
  top: 50px;
  left: 180px;
}

当我在#siteMenu 中为宽度和高度指定特定像素时，我可以看到该图标。 但是，我希望它是设备宽度和设备高度。

我试过 100%，宽度和高度的自动值，但仍然没有用。 我应该在这里做什么？

Answer 1

刚刚在 jsFiddle 中尝试了您的代码，带有 google Logo ，运行良好。

你能确保你的图标路径是正确的，所以和你的 CSS 在同一个文件夹中吗？

确保ccs文件被正确引用，标签必须在你页面的标签中？

#intro_icon{
  position: absolute;
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png');
  top: 50px;
  left: 0px;
}

对于设备宽度和设备高度，它们是媒体查询参数而不是 css 属性。您还需要设置 html 和 body 标签整页:

html{   
  width: 100%;
  height: 100%;
}

body{
    min-height:100%;   
    padding:0px;margin:0px;
}

#siteMenu{
  position: relative;
  width: 100%;
  height: 100%;
  height: 100vh;
  min-height:100%;   
}

JsFiddle , 注意不是所有浏览器都支持vh(例如IE8)