在進行響應式設計時，小屏幕下的顯示效果非常重要。但有時候，CSS樣式在小屏幕下并不能正常顯示。那么，這是什么原因呢？

@media screen and (max-width: 767px) {
.example {
display: none;
}
}

上述代碼使用@media規則來針對小于767像素的屏幕設置CSS樣式，將一個類名為“example”的元素的顯示屬性設置為“none”。但是，當你在小屏幕下查看頁面時，它仍然會顯示。為什么會這樣呢？

其實，這是因為你在使用模擬器進行測試時，模擬器所顯示的屏幕尺寸并不是真實的。實際上，一些模擬器會將屏幕尺寸設置為比你的設備大。所以，你需要在真實的設備上測試你的頁面，以確保你的CSS樣式在小屏幕下能夠正常顯示。

另外，你還需要檢查你的CSS文件，看看是否存在錯誤。有時候，簡單的語法錯誤會導致CSS樣式無法正常工作。你可以使用CSS驗證器來檢查你的CSS文件是否存在錯誤。

如果以上方法都無效，那么你可能需要檢查你的HTML代碼。確保你的HTML代碼是正確的，并且你的元素都正確地關閉。如果HTML代碼存在錯誤，那么它可能會導致CSS樣式無法正常顯示。

總之，如果你的CSS樣式在小屏幕下無法正常顯示，那么你需要檢查你的設備、CSS文件和HTML代碼是否存在錯誤，并進行相應的修正。