移动端 常见适配方案

一、流式布局(百分比布局)

通过高度定死宽度百分比来适应不同的屏幕

#1. 经典的流式布局

1. 左侧固定,右侧自适应

* {
    box-sizing: border-box;
}

.box {
    width: 100%;
    height: 700px;
    position: relative;
}
        
.right {
    width: 100%;
    height: 100%;
    background: red;
    padding-left: 200px;
}

.left {
    width: 200px;
    height: 100%;
    background: green;
    position: absolute;
}

 

2. 右侧固定左侧自适应

* {
    box-sizing: border-box;
}

.box {
    width: 100%;
    height: 700px;
    position: relative;
}

.right {
    width: 200px;
    height: 100%;
    background: ref;
    position: absolute;
    right: 0;
    top: 0;
}

.left {
    width: 100%;
    height: 100%;
    padding-right: 200px;
    background: green;
}

 

3. 两侧固定,中间自适应(圣杯布局)

    参考以上两个案例，发挥自己聪明的小脑壳实现它吧！！！

 

#2. 缺点

对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长

解决方案: rem布局

#二、响应式布局

媒体查询是实现响应式布局的关键技术

#1. 常见设备尺寸

/* 超小设备（手机，小于 480px） */
@media screen and (min-width:480px){ ... }

/* 小型设备（平板电脑，768px 起） */
@media screen and (min-width:768px) { ... } 

/* 中型设备（台式电脑，992px 起） */
@media screen and (min-width:992px){ ... }

/* 大型设备（大台式电脑，1200px 起） */
@media screen and (min-width:1200px){ ... }

 

#2. 最小宽度 min-width

    @media screen and (min-width:480px){ ... }

 

#3. 最大宽度 max-width

    @media screen and (max-width:1200px){ ... }

 

#4. 多个媒体特性的使用:并且

    @media screen and (min-width:480px) and (max-width:992px){ ... }

 

#5. not关键词的使用：除了

    @media not screen and (min-width:1200px){ ... }

 

#6. only关键词的使用: 仅仅，一般用来排除不支持媒体查询的浏览器

    @media only screen and (min-width:480px){ ... }