前端你必须明白的响应式布局

响应式布局

多终端（pc,m,ipad）使用一套样式结构。

缺点：首次加载速度慢（使用的是一套静态资源，静态资源要做额外的适配，而且图片要兼容pc端所以尺寸过大）。增加设计难度，pc和移动没有大的改变

前端如何实现响应式布局

通过js计算元素的宽高，当屏幕发生改变时 window.onresize

通过css的媒体查询 @media

bootstrap 就是一个ui库 （栅格系统） 1.引入类名 2.加类名

m站/webapp
通过手机浏览器（微信内置浏览器，safari，手机浏览器，谷歌）访问的地址

pc

app
手机应用需要通过appstore去安装 混合开发式app（把网页嵌入到app里面）

react native /flutter / weex

微信，淘宝（app） 手机桌面上有一个图标

1.对比：

原生app开发成本高

h5网页在app中显示，没有window对象，会导致window.localstorage

微信小程序
只能在微信客户端访问