css3用过哪些媒体查询 |css修改按键样式

/* 普通屏幕 */
@media only screen and (max-width: 1024px) {
...
}
/* 手机屏幕 */
@media only screen and (max-width: 480px) {
...
}
/* 横屏 */
@media only screen and (orientation: landscape) {
...
}
/* 竖屏 */
@media only screen and (orientation: portrait) {
...
}

第一个媒体查询是针对普通屏幕设备的，当屏幕宽度小于等于1024像素时生效，这意味着宽屏显示器和笔记本电脑浏览器会使用这个CSS规则。偶会在这个媒体查询中对页面布局做一些调整，以适应宽度较小的屏幕。

第二个媒体查询是针对手机屏幕的，当屏幕宽度小于等于480像素时生效，这意味着需要优化为移动设备浏览器进行的CSS规则。在这里偶会隐藏一些不必要的页面元素，以保持页面简洁明了。

第三个和第四个媒体查询基于设备的方向进行了调整。当屏幕处于横向状态时，第三个媒体查询会生效，否则第四个媒体查询生效。在这里偶会改变页面的布局，以确保页面的内容可以完整展示。

总之，媒体查询是构建具有响应式设计的网站的重要组成部分。当大家在设计网页时，应该根据终端设备的类型、分辨率和方向等信息，对CSS进行优化是非常重要的。