CSS @media - 手机和平板适配

最新推荐文章于 2025-05-07 09:18:05 发布

原创最新推荐文章于 2025-05-07 09:18:05 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

css3基础及应用专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种响应式设计的方法，通过使用不同的CSS样式来适应手机和平板设备。具体包括了针对不同屏幕尺寸和方向的样式调整，如高度、内边距及字体大小等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tip:
1.css默认手机样式，平板在此基础上修改数值；
2.以500px作为两者区分

1.手机css

h3{
    height: 4.96rem;
    padding-top: 1.51rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
  }

2.平板css

2.1竖屏

@media screen and (orientation: portrait) and (min-device-width: 500px){
  h3{
    padding-top: 1.28rem;
    height: 3.38rem;
    font-size: .75rem;
  }
}

2.2横屏

@media screen and (orientation: landscape) and (min-device-width: 500px){
  h3{
    padding-top: .45rem;
    height: 1.93rem;
    font-size: .6rem;
  }
}