网页布局(解决浏览器缩放页面乱版问题)

问题描述：

主要解决两个问题：

1. div盒子随Ctrl+【+/-】缩放而缩放的问题

2. 最小化窗口然后进行缩放页面的布局问题

3. 顶部导航固定问题

解决上面问题

第一个问题，则需了解

(1) 容器的布局：margin: auto、定位等等

(2) 尺寸单位：具体尺寸、可视尺寸(vh、vw)、百分比尺寸

第二个问题，则需了解

(1) 响应式尺寸属性：min-width、max-width、min-height、max-height

(2) 尺寸单位

第三个问题

了解固定定位(fixed)即可

尺寸单位

px：像素，绝对单位，一个像素点的大小，无法跨设备。

em：相对单位，相对于当前元素的字体大小。

rem：相对单位，相对于根元素的字体大小。

%：相对单位，相对于父元素的百分比。

vh：相对单位，相对于视口高度的百分比。

vw：相对单位，相对于视口宽度的百分比。

vmin：相对单位，相对于视口高度和宽度中较小值的百分比。

vmax：相对单位，相对于视口高度和宽度中较大值的百分比。

cm：绝对单位，厘米。

mm：绝对单位，毫米。

in：绝对单位，英寸。

pt：绝对单位，磅。

pc：绝对单位，12磅为1pc。