搜索条

发表于 | 分类于

基于手机宽度开发rem单位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*iphoen5*/
@media screen and  (min-width:320px) {
    html {
        font-size: 32px;
    }
}
/*iphone6*/
@media screen and  (min-width:375px) {
    html {
        font-size: 37.5px;
    }
}
/*ip6p*/
@media screen and  (min-width:414px) {
    html {
        font-size: 41.4px;
    }
}

用途

  • 小图标大小用rem单位做开发 做出响应
  • 高度和布局的宽度可以用rem做响应开发
  • 效果图可以基础ip6做出响应式
  • font-size 大小 可以不基于rem开发
  • 实例小米商城

像搜索条这种飘动 可以基于绝对定位

1
2
3
4
5
6
7
8
9
10
11
.search-form {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    width: 80%;
    height: 0.8rem;
    border-radius: 5px;
    background-color: #fff;
}
  • 先通过定位 在设置宽度和高度 百分比单位是相对父元素