前端初期小知识（布局与单位）

静态布局

描述：设定好的长和宽，大小不会改变，无论屏幕都多大大，分辨率都不会改变

优点：开发简单，没有什么兼容性的问题

缺点：当屏幕分辨率太低时，会展现出滚动条

场景：传统web网站

自适应布局

描述：不同屏幕分辨率下，保持原有展示方式。元素的位置会变化而大小不会变化

优点：页面能够兼容不同分辨率的设备

缺点：屏幕太小会发生内容过于拥挤。所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式

场景：传统web网站

响应式布局

描述：不同屏幕分辨率下，展示方式不同

优点：一套代码兼容web端、平板、以及手机端网页

缺点：工作量大、UI设计也需要多个版本

场景：同时兼容多种不同设备

弹性布局（em/rem布局）

描述：使用 em 或 rem 单位进行相对布局，在不同屏幕分辨率下页面所有元素的高宽都等比例缩放

优点：所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应

缺点：这种布局方式只是宽度自适应，高度却没有做到自适应

场景：同时兼容多种不同设备

弹性布局（flex布局）

描述：目前比较流行的一种布局，使用传统布局难以实现一些复杂的布局，使用flex布局实现就变得非常容易

优点：简便、完整、响应式地实现各种页面布局

缺点：只兼容IE10+的浏览器

场景：三栏式布局、垂直水平居中布局

流式布局（百分比布局）

描述：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。主要特征是像瀑布一样往下流，有规律的无限遍历模块。

优点：灵活，充分利用浏览器的空间

缺点：宽度按照屏幕进行适配调整，对于大屏幕来说用户体验并不是特别好，有些布局元素会显得很长

场景：类似抖音视频、微博消息、微信朋友圈

@media

媒体类型选择scree(电脑手机平板)、print(打印机预览)、all(所有设备)->(一般的情况不写为all，也可以设置为scree)

视口的概念

• 在桌面端->视口指代的就是浏览器的可视区域

• 在移动端->视口指代的是Layout Viewport（布局视口）

  vw和vh是视口单位， 根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，我们不需要顾虑到那么多不同电脑有关分辨率的自适应问题。

  vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

1. 1vw表示相对于视图窗口的宽度的1%；

2. 1vh表示相对于视图窗口高度的1%；

3. vmin表示选取vw与vh中最小的那一个；

4. vmax表示选取vw与vh中最大的那一个；

任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。它这个与百分比布局有点相似，但比百分比布局更好用：

• 视口单位依赖于视口的宽高，根据视口尺寸的百分比来定义长度与宽度

• 而百分比则是依赖于元素的祖先元素宽高，根据祖先元素的宽与高来定义内部元素使用百分比设置宽高之后的宽度与高度。

响应垂直居中

#box { width: 50vw; height: 50vh; margin: 25vh auto; }

rem布局-解决字体适配

更改html 根字体大小，实现字体大小随屏幕尺寸变化。

• @media only screen and (max-width: 1600px) and (min-width: 1280px){ html{ font-size: 14px; } }

• @media only screen and (max-width: 1280px) and (min-width: 960px){ html{ font-size: 12px; } }

• @media only screen and (max-width: 960px){ html{ font-size: 10px; } }

VM、VH 与rem的使用

类名为box的div示例

.box{ width:50vw; height: 20vh; line-height: 20vh; font-size: 1.5rem; margin:0 auto; font-weight: bold; background-color: blue } 

50vw表示 此div占据视口宽度的50%、高度占据视口高度的20%，并且会随着视口的变化，进行自适应;字体是1.5倍的html根字体大小。并且根据媒体查询进行字号变化。