@media screen and (max-width: 800px) { /* 在小于800px的屏幕上应用的样式 */ }
大家可以在这个@media规则下编写自己的CSS样式,以使网页在小屏幕下具有更好的呈现效果。例如,大家可以针对小屏幕下的导航栏来修改CSS,以使其更好地适应小屏幕的宽度。
@media screen and (max-width: 800px) { .navbar { width: 100%; height: auto; } .navbar a { display: block; text-align: center; } }
以上是一些CSS的示例代码,使用@media规则可以方便地实现针对不同屏幕尺寸的优化,提供更好的用户体验。在编写自己的CSS代码时,一定要注意不同屏幕尺寸下的效果,使网页在不同设备上都能够呈现得漂亮、舒适。