css 简单的社交图标媒体查询

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 简单的社交图标媒体查询相关的知识，希望对你有一定的参考价值。

@media only screen and (max-width: 1140px) {
 .header-widget-area .simple-social-icons ul.alignright {
    float: none;
    display: table;
    margin: 0 auto;
 }
}
    
@media only screen and (max-width: 839px) {
  .site-header .widget-area {
    margin-top: 20px;
  }
}

/* min-width: 480 max-width: 1140 */
.simple-social-icons {
	align: center;
}


/* min-width: 480 max-width: 839 */
/* HTML5 5th @media query trigger point */

.site-header {
min-height: 80px;
} 

.header-image .site-header .wrap .title-area {
width: 289px;
height: 81px;
background-size: 289px 81px;
}


max-width: 479
/* HTML5 5th @media query trigger point */

.site-header {
min-height: 80px;
} 

.header-image .site-header .wrap .title-area {
width: 246px;
height: 69px;
background-size: 246px 69px;
}

以上是关于css 简单的社交图标媒体查询的主要内容，如果未能解决你的问题，请参考以下文章

有没有办法使用 Flexbox 在媒体查询中将我的社交媒体图标居中？

css 替换X主题中的社交媒体（字体真棒）图标