关于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[媒体设备]js控制滚动条
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伸缩盒⼦模型，基于这个属性，可以让某些效果处理起来更加的⽅便
有什么不对的地⽅请多多指教，⼤家⼀起进步

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。