css选择器和媒体查询结合使用实例-css教程-PHP中文网

css选择器和媒体查询结合使用实例

P粉602998670

发布： 2025-09-19 09:51:01

原创

1016人浏览过

通过CSS选择器与媒体查询结合，可实现响应式设计；2. 使用元素选择器配合max-width，调整导航栏在移动端为垂直布局；3. 利用类选择器.card与min-width和max-width，使卡片在平板上两列显示；4. 结合属性选择器img[alt*="hero"]与orientation查询，在横屏时调整图片尺寸；5. 核心在于精准选择元素并根据设备条件应用样式。

css选择器和媒体查询结合使用实例

在实际开发中，将CSS选择器与媒体查询结合使用，可以实现更精细的响应式设计。通过在特定屏幕条件下对特定元素应用样式，让页面在不同设备上都有良好的视觉效果。

针对不同屏幕尺寸调整导航栏样式

比如一个常见的导航栏，在桌面端显示为横向布局，而在移动端则变为垂直折叠菜单。可以这样写：

/* 桌面端：横向排列 */
nav ul {
  display: flex;
  list-style: none;
}
nav a {
  padding: 15px;
  text-decoration: none;
}
<p>/<em> 移动端：垂直堆叠 </em>/
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
nav a {
padding: 10px;
font-size: 14px;
}
}</p>

登录后复制

这里使用了元素选择器 nav、a 和 ul，并配合媒体查询限制最大宽度，实现适配。

为特定类在平板设备上调整布局

假设有一个带 .card 类的卡片组件，希望在平板（如 769px - 1024px）上每行显示两列，可以这样控制：

立即学习“前端免费学习笔记（深入）”；

AI新媒体文章

专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

查看详情

.card {
  width: 100%;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
}
<p>@media (min-width: 769px) and (max-width: 1024px) {
.card {
width: 48%;
display: inline-block;
}
.card + .card {
margin-left: 2%;
}
}</p>

登录后复制

这里使用类选择器 .card，并结合复合媒体查询条件，精准控制中等屏幕下的布局。

根据设备方向改变图片大小

有时希望在横屏手机上显示更大的图片，在竖屏时缩小。可以结合属性选择器和 orientation 查询：

img[alt*="hero"] {
  max-width: 100%;
  height: auto;
}
<p>/<em> 横屏时放大 </em>/
@media (orientation: landscape) and (max-height: 500px) {
img[alt*="hero"] {
max-width: 80%;
}
}</p>

登录后复制

这里使用属性选择器匹配 alt 属性包含 "hero" 的图片，并在横屏小高度设备中调整其尺寸。

基本上就这些常见用法。关键是把选择器的精确性与媒体查询的条件判断结合起来，做到“在哪种设备下，对哪些元素做什么调整”。不复杂但容易忽略细节。

以上就是css选择器和媒体查询结合使用实例的详细内容，更多请关注php中文网其它相关文章！