前端响应式

什么是响应式

总所周知，我们前端也被称为响应式web交互设计，那么什么是响应式呢？

响应式：响应不同屏幕设备合适地展现网页效果的方式或着手段。

举个栗子来说，就是我要苹果（PC页面）你就给我一个苹果（PC页面），我要梨子（移动端页面）你就不能再把那个苹果（PC页面）给我，而是给个梨子（移动端页面），虽然他们都是水果（页面）。

响应式web交互设计

响应式web交互设计就是为了一个网站能够兼容多个终端，页面能够自动适配显示器设备。

怎么实现响应式布局

1. 百分比布局

百分比布局就是把需要用到尺寸的都用百分比来写，这样没有具体的大小就能适配不同的屏幕

* {
    margin: 0;
    padding: 0;
}
        
html,
body {
    width: 100%;
    height: 100%;
    background-color: black;
}
        
.bfb {
    width: 50%;
    height: 50%;
    background-color: pink;
}

<div class="bfb"></div>

优点：实现简易 缺点：没有办法做太过复杂的页面，特别是需要不同分辨率下样式不同的场景

2. 媒体查询

媒体查询就是对不同分辨率的屏幕编写不同的css样式来达到适配的目的 也就是在不同分辨率的区间写上不同的样式，不需要改变的样式可以写在外面变成公共样式

        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            height: 200px;
            background-color: pink;
        }
        
        @media screen and (max-width:900px) {
            /* 屏幕尺寸小于等于700时下面的样式执行 */
            .box {
                background-color: plum;
            }
        }
        
        @media screen and (max-width:700px) {
            .box {
                background-color: aquamarine;
            }
            .title {
                display: none;
            }
        }
        
        @media screen and (min-width:300px) and (max-width:500px) {
            .box {
                background-color: skyblue;
            }
        }

   <div class="box">
       <p class="title">标题</p>
   </div>

优点：能实现在不同分辨率下显示不同的效果 缺点：代码写起来比较麻烦，只要有变化就要重新开一个@media写，而且容易混淆

3. rem响应式布局

rem是一个相对单位，使用rem来设定大小时是根据更元素的font-sixze计算的，所以rem一般是使用在移动端较多

        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            font-size: 10px;
        }
        
        body {
            /* 重置字体大小 让字体不受屏幕兼容的影响而变化 */
            font-size: 14px;
        }
        
        .box {
            width: 37.5rem;
            height: 20rem;
            background-color: pink;
        }

   <div class="box"></div>

       // 封装兼容布局的函数
       function setHtml() {
           // 获取设备宽度
           var dWidth = document.documentElement.offsetWidth

           // 给html标签设置fontsize也就是给rem赋值，一般手机页面设计稿为二倍图：750*1334，所以这里用375来进行计算
           document.documentElement.style.fontSize = dWidth / 375 * 10 + 'px'
       }

       // 只要窗口大小变化就执行
       window.onresize = setHtml

       // 页面加载时也触发
       setHtml()

一般我使用rem的话直接把这一段JS导入就行

优点：当计算好之后直接使用rem来代替px就能实现兼容布局，比较方便也可以实现比较复杂的页面 缺点：如果还是要实现同一页面在不同的屏幕显示不同的样式还是建议联合媒体查询一起写

4. vw/vh响应式布局

其实vw/vh很好理解，也可以看成是百分比，但是vw/vh是可以进行计算的，个人觉得没什么必要所以不常用

5. flex弹性布局

利用flex来适应不同屏幕，因为flex本身在设置有关布局的时候就不怎么需要设计尺寸大小，所以flex也可以很好的实现响应式，详情可以查看： blog.csdn.net/weixin_4960…