关于JS中响应式布局的简单介绍

一、viewport视口

​       在pc端，我们开发的html页面运行在浏览器中，浏览器有多宽（一般浏览器代表设备的宽度）html就有多宽，也就是在浏览器宽度的视口中渲染和呈现我们的页面
​       移动端和PC端区别：不管移动端设备（代指打开的浏览器）的宽度是多少，HTML页面宽度是980（或者1024）=>导致的问题：如果在设备窗口想要把整个页面呈现出来（小窗口中完全展示大页面），我们只能把大页面进行缩放，HTML页面缩放了，那么页面中所有内容都缩放了

​ 【解决方案】

​ ​       只要让H5页面的宽度和手机设备的宽度保持一致即可，就不会出现手机渲染页面的时候把页面缩放的事情了

<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个meta标签就是在设置VP（视口）的规则
	<!-- width=device-width 让HTML的宽度等于设备的宽度
	initial-scale：1.0  初始缩放比例是1:1（也就是既不放大也不缩小）
	user-scalable=no 禁止用户手动缩放
	maximum-scale=1.0 设置最大缩放比例为1:1
	minimum-scale=1.0 设置最小缩放比例为1:1（计步放大也不缩小=>部分安卓手机中设置user-scalable是不起作用的，需要这两个一起使用）
	....
	-->

layout viewport:布局（页面）视口（和开发css等相关）

​ ​       visual viewport：手机视口

​ ​       ideal viewport：理想视口

​ ​       真实的移动端项目开发中，一般是不会出现横向滚动条的，想让他不出现横向滚动条就要保证内容的宽度不超过HTML的页面宽度

​ ​       移动端开发手机设备宽度不一定->HTML页面的宽度也不一定->所以内容的宽度一般也是不固定的（也就是所谓的百分比宽度）

​ ​       移动端开发：外层盒子的宽度一般都是百分比设定的，很少有固定值的（里面具体的小元素可以固定）

二、平时处理的移动端项目

​ 1.PC端和移动端共用一套项目的（结构相对简单的：一般都是展示类的企业站）

​ ​【设计师一般只给一套设计稿】

​ ​       A：先做PC端（设计给的设计稿一般都是给PC端的）
       ​       一般宽度都是自适应的（具体情况有所不同）
​ ​       B：切换到手机端，使用@media（媒体查询）把不同设备上不合适的样式进行修改

​ ​       ​      我们可以吧@media理解为JS中的条件判断：在不同条件中使用不同的css样式进行渲染

​ @media[媒体设备]
​ ​       all->所有设备
​ ​       screen->所有屏幕设备
​ ​       print->所有打印机设备
​ ​       …
​ @media[媒体设备] and [媒体条件] and [媒体条件] …

​ 2.PC端和移动端是分开的两套不同的项目

​ 【设计师一般会给两套设计稿（PC+移动）】

​ ​       =>PC端单独做（做的时候不需要考虑移动端响应式）

​ ​       ​       固定布局

​ ​       =>移动端单独做（只需要考虑移动端响应式适配即可）

​ ​       ​       响应式布局

​ ​       ​       A.依然可以基于@media来处理（麻烦一些）

​ ​       ​       B.固定布局（viewport=>width=320px）：按照设计稿把320尺寸的写好即可（所有的尺寸都可以固定，而且都是设计稿的一半【因为设计稿都是大一倍的】），在其它设备上，让320的页面居中展示即可

​ ​       ​       C.scale等比缩放布局（严格按照设计稿的尺寸来写样式【没有啥自适应宽度，都是固定值】，在其它设备上，首先获取设备的宽度，让其除以设计稿的宽度，然后让原始写好的页面按照这个比例整体缩小即可）transform-origin：left top =>控制最终缩放的时候：不是从中心点缩放，而是从左上角 、、=>会导致一些问题列入字体模糊…

​ ​       ​       D.REM等比缩放：参考scale，只是使用rem单位来实现等比缩放（严格按照设计稿的尺寸编写【但是一般宽度让他自适应】，其余的值可以写成固定值->在编写css样式的时候，我们把所有的px单位都换算成REM单位->当加载页面的时候，根据当前设备的尺寸除以设计稿，根据比例动态调整REM和PX的换算比例）

​ REM是相对单位，相对于根元素（HTML标签）的字体大小设定的单位

​ E:CSS3中提供了flex-box伸缩盒子模型，基于这个属性，可以让某些效果处理起来更加的方便

---

有什么不对的地方请多多指教，大家一起进步