通过CSS选择器与媒体查询结合，可实现响应式设计；2. 使用元素选择器配合max-width，调整导航栏在移动端为垂直布局；3. 利用类选择器.card与min-width和max-width，使卡片在平板上两列显示；4. 结合属性选择器img[alt*=”hero”]与orientation查询，在横屏时调整图片尺寸；5. 核心在于精准选择元素并根据设备条件应用样式。
在实际开发中，将CSS选择器与媒体查询结合使用，可以实现更精细的响应式设计。通过在特定屏幕条件下对特定元素应用样式，让页面在不同设备上都有良好的视觉效果。
针对不同屏幕尺寸调整导航栏样式
比如一个常见的导航栏，在桌面端显示为横向布局，而在移动端则变为垂直折叠菜单。可以这样写：
/* 桌面端：横向排列 */nav ul { display: flex; list-style: none;}nav a { padding: 15px; text-decoration: none;}/ 移动端：垂直堆叠 /@media (max-width: 768px) {nav ul {flex-direction: column;}nav a {padding: 10px;font-size: 14px;}}
这里使用了元素选择器 nav、a 和 ul，并配合媒体查询限制最大宽度，实现适配。
为特定类在平板设备上调整布局
假设有一个带 .card 类的卡片组件，希望在平板（如 769px – 1024px）上每行显示两列，可以这样控制：
立即学习“前端免费学习笔记（深入）”；
Seede AI
AI 驱动的设计工具
586 查看详情
.card { width: 100%; margin-bottom: 20px; background: #fff; border: 1px solid #ddd; padding: 15px;}@media (min-width: 769px) and (max-width: 1024px) {.card {width: 48%;display: inline-block;}.card + .card {margin-left: 2%;}}
这里使用类选择器 .card，并结合复合媒体查询条件，精准控制中等屏幕下的布局。
根据设备方向改变图片大小
有时希望在横屏手机上显示更大的图片，在竖屏时缩小。可以结合属性选择器和 orientation 查询：
img[alt*="hero"] { max-width: 100%; height: auto;}/ 横屏时放大 /@media (orientation: landscape) and (max-height: 500px) {img[alt*="hero"] {max-width: 80%;}}
这里使用属性选择器匹配 alt 属性包含 “hero” 的图片，并在横屏小高度设备中调整其尺寸。
基本上就这些常见用法。关键是把选择器的精确性与媒体查询的条件判断结合起来，做到“在哪种设备下，对哪些元素做什么调整”。不复杂但容易忽略细节。
以上就是css选择器和媒体查询结合使用实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1069794.html
微信扫一扫 
支付宝扫一扫 
