CSS移动定义不适用？

Question

我创建了一个网站here。除了标语太大的手机外，它在所有屏幕上都很棒。所以我为口号添加了一个移动css定义＆＃34;始终编码和酿造好东西＆＃34;但在我的手机上它什么都没做？我正在使用bootstrap，但只使用网格和响应元素。我申请的CSS是以下问题：

＆＃13;

＆＃13;

@media (max-width: 480px) { 
	.grabber{
		font-size: 12px;
	}

}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您在stylesheet.css中定义了以下样式顺序：

@media (max-width: 480px) { 
    .grabber{
        font-size: 12px;
    }
}
.grabber{
    color: #3498db;
    font-size: 2em;
    font-family: 'black_roseregular', Arial, sans-serif;
}

由于处理css规则，因此应用于.grabber的最新字体大小样式将为font-size: 2em;。您只需要像这样交换这些语句：

.grabber{
    color: #3498db;
    font-size: 2em;
    font-family: 'black_roseregular', Arial, sans-serif;
}
@media screen and (max-width: 480px) { 
    .grabber{
        font-size: 12px;
    }
}