页面适配的地是为了让我们设计的页面在每个屏幕尺寸下，都有比较良好的显示效果。常见的页面适配有两种分别是自适应布局和响应式布局，两者之前的区别简单来说就在于开发帅帅们是否用一套代码实现。（判断方法：同一个页面在不同尺寸的屏幕上访问时，看网址是否一样，只有一个网址为响应式，有多个不同的网址为自适应）
一般B端产品做自适应时候都考虑浏览器页面，目前展示没有接触过B端C化的产品 ，而目前常用的适配方式基本上都属于响应式布局，在响应式布局中又可以分为：静态布局，百分比布局，断点布局，弹性布局
静态布局：静态布局也可以说成固定布局，意味着内容区域始终是固定不变的，在浏览器进行变化的时候，超出的部分则用留白进行显示。静态布局中常用的适配方式为右边留白或者是居中留白，意思很简单 右边留白就是常见的左侧导航栏贴着左侧展示，如果页面进行放大缩小出现空白区域，那么这个空白区域就出现在右侧，居中留白就是页面主体内容居中，留白区域放在两侧在放大缩小的时候
百分比布局：百分比布局也叫流体布局，白分布布局意味着内容区域在浏览器进行呢变化的时候，宽高回味固定的比例进行对应的变化，所以一般在采用这种布局方式的情况下主要注意的是宽度的适配，但是同时也要注意适配的边界限定值，设定一个最大值和最小值，超出限定值之后就不再进行适配，可以将超出的空间留给其他字段，当然也有特殊情形下需要注意高度的适配 比如某些内容必须需要在一屏幕内展示完全，这时候就是宽度以高度的固定比例进行变化，同样也是需要去设定一个需要的临界值
断点布局：断点布局需要设定一个断点，再根据设定好的断电进行屏幕内容的变化，断点布局主要适用于一些固定的元素在不同的屏幕尺寸之间的变化，比如左侧导航的宽度在不同页面下的尺寸变化
弹性布局：弹性布局指的就是跟随浏览器的变化而变化，因为这种布局会让文字随着变（其他布局的文字都不会进行变动），因此如果需要以这种进行适配，那么我们在做设计的时候需要以1366的最小尺寸来进行设计。因为如果以其他尺寸来设计的话，就会出现向下兼容时字号小于12px的情况。这种布局的应用场景则更多用于演讲展示等设计场景，能够根据屏幕尺寸让整体内容等比放大，获得更好的展示效果。但弹性布局使用的单位是em来定义元素宽度，而其他几类布局使用的都是百分比。因此这种布局对于前段开发来说会相对更耗费时间一些。因此如果没有特别要求，尽量不使用该布局。
