CSS @media - 手机和平板适配_@media(device-type:tablet)

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

1.手机css

h3{
    height: 4.96rem;
    padding-top: 1.51rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
  }
1
2
3
4
5
6
7

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;
  }
}
1
2
3
4
5
6
7

• 2.2横屏

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