网页布局总结

视口

1.布局视口
窗口缩小布局不变，盒子等比例缩小
2.视觉视口
窗口缩小盒子大小不变，布局不变，下方出现滚动条
3.理想视口
理想视口就是将布局视口的宽度修改为视觉视口

//理想视口的标志 （在这里插入代码片视口标签）
<meta name="viewport" content="width=device-width user-scalable=no, initial-scale=1.0 maximum-scale=1.0, minimum-scale=1.0">

width=device-width 视口宽度=设备宽度
user-scalable=no 用户不允许缩放
initial-scale=1.0 初始缩放比
maximum-scale=1.0 最大缩放比
minimum-scale=1.0 最小缩放比

移动端主流方案

1.单独制作移动端页面（主流）
根据设备的不同，跳转到不同域名下的网址，读取不同的网页文件（一个项目分为两套系统，分别对应pc端系统与移动端系统，其中又分别对应pc端页面布局与移动端页面布局）
它可以分为：
流式布局（百分比布局）
flex布局（伸缩布局）
rem布局
2.响应式布局
域名不变，窗口缩小布局改变

流式布局（百分比布局）

flex布局（伸缩布局）

1.flex布局是CSS中的一种布局手段，它主要用来代替浮动来完成页面的布局
2.flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

注意：
当父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效

rem布局

响应式布局

域名不变，窗口缩小布局改变