Question

我的style.css的一部分指示我的网站左右对齐照片。虽然这在桌面上看起来很棒，但我想将其排除在移动设备上，因为它看起来不太好。这是我的style.css

中的代码

/*---Start automatic align left and right of the blog post randomly----*/
.post-list:nth-child(odd) img{
float:left;
margin-right:20px;
}

.post-list:nth-child(even) img{
float:right;
margin-left:20px;
}

.post-list img.wp-post-image{
width:auto !important;
height:180px !important;
}

.post-list:nth-child(odd) iframe{
float:left;
margin-right:20px;
}

.post-list:nth-child(even) iframe{
float:right;
margin-left:20px;
}

.post-list iframe{
max-width:100%;

/*---Start automatic dis-align left and right of the blog post randomly--*/
body.category-8 .post-list:nth-child(odd) img{
float:none;
margin-right:0;
}

body.category-8 .post-list:nth-child(even) img{
float:none;
margin-left:0;
}
body.category-8 .post-list:nth-child(odd) iframe{
float:none;
margin-right:0;
}

body.category-8 .post-list:nth-child(even) iframe{
float:none;
margin-left:0;
}

body.category-8 .post-list img.wp-post-image{
width: auto !important;
height:180px !important;
}
body.category-8 img.frm_ajax_loading{
max-width:16px !important;
}
/*---End automatic dis-align left and right of the blog post randomly----*/

如何在移动设备上排除此功能？

谢谢！

Answer 1

您可以将媒体查询放入样式表中。例如，此媒体查询将检查浏览器窗口是否至少为480px，高于iPhone纵向，此值可以更改当然。然后它运行此代码。

如果浏览器窗口宽度小于480px，则无法运行该代码。

@media screen and (min-width: 480px) {
   /*---Start automatic align left and right of the blog post randomly----*/
.post-list:nth-child(odd) img{
float:left;
margin-right:20px;
}

.post-list:nth-child(even) img{
float:right;
margin-left:20px;
}

.post-list img.wp-post-image{
width:auto !important;
height:180px !important;
}

.post-list:nth-child(odd) iframe{
float:left;
margin-right:20px;
}

.post-list:nth-child(even) iframe{
float:right;
margin-left:20px;
}

.post-list iframe{
max-width:100%;
}
}

如果您想了解有关您希望定位的屏幕尺寸的更多信息，请参阅css-tricks上的精彩文章。

Answer 2

一种解决方案是使用HeadJS根据条件加载不同的CSS文件;如果它是桌面负载desktop.css，如果它的移动负载mobile.css。

更多信息：https://github.com/headjs/headjs

我需要帮助在mobile.css上排除我的style.css的一部分

2 个答案: