前端响应式

什么是响应式

总所周知，我们前端也被称为响应式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