前端响应式布局原理与方案 详解前端响应式布基础知识
一.背景介绍随着智能手机的快速发展，大众群体使用手机上网的频率大大增加，手机屏幕相对较小，宽度通常在600像素以下；PC的屏幕宽度一般在1000像素以上(目前主流宽度为1366×768)，
随着智能手机的快速发展，大众群体使用手机上网的频率大大增加，手机屏幕相对较小，宽度通常在600像素以下；PC的屏幕宽度一般在1000像素以上(目前主流宽度为1366×768)，有的甚至达到2000像素。同样的内容在不同尺寸的屏幕上显示出满意的效果并不容易。如何适应这种传统网页只能在pc端显示的趋势，成为人们开始关注和解决的问题。因此，提出了响应式布局的概念。
二、什么是响应式布局？响应式布局，简而言之就是一个网站可以兼容多个终端，而不是为每个终端做一个特定的版本。这个概念的诞生是为了解决移动互联网浏览的问题。响应式布局可以为不同终端的用户提供更舒适的界面和更好的用户体验，而随着大屏移动设备的普及，用“大势所趋”来形容也不为过。
三，响应式布局的优势1.响应式设计可以为用户提供友好的网络界面，同样的布局，但在不同的设备上有不同的排版。这是响应式设计的最大优势。如今科技飞速发展，每天都会有新的智能手机推出。如果你有响应式的网页设计，用户可以一直和网站保持联系，这是基本的，也是响应式实现的初衷。
2.跨平台和终端，无需分配子域。
3.它对于不同分辨率的设备是灵活的。
四。响应式布局的缺点1.响应式设计为了适应不同的设备，需要大量专门为不同设备构建的css和js代码，导致文件变大，效率低下，代码繁琐，隐藏无用元素，加载时间变长，影响页面加载速度。其实这是一个折中的设计方案，由于各种因素的影响，无法达到最好的效果。
2.响应式设计中，图片、视频等资源一般都是统一加载的，导致在低分辨率电脑上实际加载的图片或视频大于其显示需求，造成不必要的流量浪费，影响加载速度。
3.移动端和电脑端的很多交互组件有很大的不同，比如:日期选择控件。电脑端更多的是弹出选择控件，移动端是picker选择。在响应式布局中，很难在不同的平台上使用不同的交互组件。
4.计算机的生态相对简单。一般只需要考虑各种浏览器的兼容性，但是移动端的生态比较丰富。移动端的h5页面，微信的微信官方账号h5，小程序中的h5，都连接了各个生态的api函数。在一套代码中，需要判断不同的生态采取不同的程序分支，这对代码维护提出了极高的要求。
五、适合响应式布局的应用。内容型、信息型网站非常适合响应式布局，比如官网、新闻网站、审批网站等。这类网站主要用于内容浏览和确认，用户交互较少，只需要根据不同的屏幕大小调整页面内容显示即可。
不及物动词不适合响应式布局的应用大型门户网站、电商网站、后台管理应用不适合响应式布局，因为响应式设计的基本原理是不会因为设备不同而给用户不同的内容(比如会从低分辨率设备上删除一些内容)，这些网站有大量的单页内容。当它们沦为低分辨率设备，所有内容都必须浏览时，必然导致页面拉长，浏览难度增加。所以很多大型门户网站或者电子商务网站都会提供一个移动设备版的网站。为不同设备提供优化的浏览体验绝对是网站发展的目标，也是网站技术发展的趋势。但响应式设计只是实现这一目标的手段之一，只适用于某些类型的网站，不能一概而论。
