Question

在我的网站上，我有几个图标，它们在我的电脑（Macbook Pro 13“）以及Safari和Chrome中都很好看。但是当我从Chrome浏览器或Safari中的11英寸Macbook Air访问我的网站时，我的联系页面上的图标很小，而我在不同工作中的联系人正在搞乱，更改显示：当我悬停在上面时内联和大小更改公司网站链接旁边的那些..

它们都是基于％的，不应该这样做。

这是我的联系页面图标：

HTML：

<div id="contact_me">

<ul>
 <li><a href="mailto:hello@niklaskoskela.com">
 <img src="img/mail.png" alt="email me"></a></li>
 <li><a href="mailto:hello@niklaskoskela.com">
 <p>HELLO@NIKLASKOSKELA.COM</p></a></li>
</ul>

<ul>
 <li><a href="http://www.linkedin.com/pub/niklas-sidhu-koskela/68/20b/593" target="_blank">
 <img src="img/linkedin.png" alt="find me on Linked in"></a></li>
 <li><a href="http://www.linkedin.com/pub/niklas-sidhu-koskela/68/20b/593" target="_blank">
 <p>NIKLAS SIDHU KOSKELA</p></a></li>
</ul>

<ul>
 <li><a href="https://twitter.com/don_koskela" target="_blank">
 <img src="img/twitter.png" alt="follow me on Twitter"></a></li>
 <li><a href="https://twitter.com/don_koskela" target="_blank">
 <p>@DON_KOSKELA</p></a></li>
</ul>

</div>

CSS：

#contact_me ul {
    height: 80%;
    width: auto;    
}
contact_me ul li {
    display: inline-block;
    height: 20%;
    width: auto;
    list-style-type: none;
    vertical-align: middle;
    padding-right: 2%;
    padding-bottom: 2%;
}

contact_me ul li a {
    text-decoration: none;
}

contact_me ul li p {
    display: inline;
    font-family: 'Quicksand';
    color: #7a7a7a;
    font-size: medium;
    font-weight: 100;
}

contact_me ul li p:hover {
    display: inline;
    font-family: 'Quicksand';
    color: #cc7e47;
    text-decoration: underline;
    font-size: medium;
    font-weight: 100;
}

contact_me ul li img{
    height: 9%;
    display: inline;
}

以下是我不同项目中的图标：

HTML：

<div class="info">
 <ul class="details">
  <li><img src="img/skills.png" alt="skills">
  <h3>MOTION GRAPHICS, VIDEOGRAPHER</h3></li>
  <li><img src="img/period.png" alt="period">
  <h3>MAR 2012 - APR 2012</h3></li>
  <li><img src="img/website.png" alt="project website">
  <a href="http://www.addmorecolors.com" target="_blank">
  <h3>WWW.ADDMORECOLORS.COM</h3></a></li>
 </ul>
</div>

CSS：

.info{

    float: left;
    padding-bottom: 5%;
    width: 45%;

}

.info ul{

    display: block;
    list-style: none;
    padding-top: 5%;

}

.info ul li{

    display: inline-block;
    padding-top: 5%;
    padding-bottom: 2%;
    vertical-align: middle;

}

.info ul li img{

    width: 13%;
    padding-right: 5%;
    float: left;
    display: inline;
    vertical-align: middle;

}

.info ul li a{

    text-decoration: none;
    color: #6dc4c8;

}

.info ul li a:hover{

    text-decoration: none;
    color: #cc7e47;
    border-bottom: 1px solid #cc7e47;

}

.info ul li h3{

    display: inline;
    padding-top: 7%;
    font-size: small;
    font-weight: 400;
    font-family: 'Quicksand';
    vertical-align: middle;

}

希望有人可以帮助我，我完全迷失了......

此致

Answer 1

你可以通过在你的CSS中使用@media查询和一个视口来解决这个问题，并将这个元标记添加到你的html：

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>

使用@media查询和视口，您可以使用css中的媒体查询+视口声明每个屏幕宽度的大小：

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }

//宽度为820到920像素的屏幕的css到这里

我主要使用的值是：从20 - 600,600-700,700-820,820 - 920,920 - 1200，@ media screen和（min-width：1200px）{@ viewport {width：1200px; }（最后一个将设置任何大于1200像素宽度的屏幕的大小，所以你的代码最大的版本在这里进行}

因此，这意味着您的css代码将被调整为适应大小的6倍。

这称为自适应或响应式设计，非常容易实现

有关详细信息，请查看此http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

图标会更改不同计算机上的大小和显示属性

1 个答案: