如何认知前端中的一些尺寸单位与网页适配？

一. 尺寸单位

  1. 整体的长度单位共分为两大类：

        ★ 注：本次主讲部分红字的尺寸单位。

  （1） 绝对长度单位：绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境(显示器、分辨率、操作系统等)；

                        ☆ 如：in , cm , mm , q , pt , pc , px ；

          ① px其实就是像素的意思，全称pixel，也就是图像的基本采样单位，总的来说px就是对应我们显示器的分辨率，相对于显示器屏幕分辨率而言，px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

          ②

  （2） 相对长度单位：相对长度单位是网页中常用的长度单位，它们根据元素的字体大小或其他相关属性来决定其长度，而不是使用固定的像素值。这种单位使得网页在不同设备和屏幕尺寸上能够更好地适应和缩放，从而提供更好的用户体验；

                        ☆ 如：em , rem , % , vw , vh , vmax , vmin , vm , ch , ex 。

          ① em：是一个常用的相对长度单位，其值是根据元素的字体大小（font-size属性）来设置尺寸的，其可以应用于多种CSS属性，如width、height、line-height、margin、padding、border等，使得元素的尺寸和间距能够根据字体大小自动调整。

          ② rem：是CSS3新增的另一个相对长度单位，其值是根据根元素(即html元素)字体大小设置尺寸的。这使得在响应式设计中，特别是移动端页面开发中，能够更灵活地控制元素的尺寸。

                【 ☆ em 和 rem：都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器翻译成 从16px到 160px 或其他任意值，需要注意的是，浏览器的默认字体大小是16px(但不是所有的浏览器都是16px), 而且浏览器的默认字体大小都是可以改变的。】

          ③ vw 和 vh ：相对于视口设置的宽度和高度 ，而不是父元素的（CSS百分比，也就是单位%，是相对于包含它的最近的父元素设置的高度和宽度），1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。 例如：浏览器高度为950px，宽度为1920px, 则1 vh = 950px/100 = 9.5     px，1vw = 1920px/100 =19.2 px。

          ④ vmax和vmin：相对于视口的最大或最小长度，vmax会一直按照视口的最长方向为参考 (处理横竖屏问题)，vmin同理。

  2. 尺寸单位 - em、rem与像素的转换关系

  （1）当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。 在很多资料中都说em是根据父级元素的字体大小进行设置，其实根据w3c的约定，em大小是根据设置了em单位元素的大小进行设置。为什么会有以上说法是应为css的继承特性导致，子级元素继承了父级的font-size属性，所以设置em时说是根据父级的字体大小进行设置

                ★ 注意：特别要注意em的继承问题。

  （2）rem单位的大小永远都会根据根元素(html)的字体大小进行设置

 

  3. 尺寸单位 - rem与em的区别 

  （1）rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中默认字体大小的设置影响，除非显式重写一个具体单位；

  （2）em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

  4. 什么时候使用em、rem?

  （1）em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性(例如组件，可以改变大小的组件)，使用em 值设置导航菜单项的padding、 margin，line-height等值，目的适配不同屏幕大小下导航跟随变化；

  （2）当你设计的项目需要适配不同屏幕大小的时候，那么rem就排上了用场，这几乎在一个标准的设计中占据了一切，包括heights，widths，padding，margin，border，font-size，shadows，几乎包括你布局的每部分，简单地说，一切可扩展都应该使用 rem 单位。

        ★ 注意：对于border、shadows等比较固定的属性，最好还是使用px。

二. 网页适配---PC端网页布局方案

  1. 静态布局：

        内容在一屏内显示,采用了内容框左右居中的办法,里面的内容绝对于这个内容框定位。这样一来,在不同大小屏中,内容总是在中间,看起来较正常。(目前市面上最常见的pc端布局方式)这种方式中间内容框的取值范围一般在960-1100之间;因为内
容框中的元素定位全部相当于这个内容框，所以在不同的屏幕尺寸下，大小不会发生改变。

  2. 自适应布局：

        ① 就是为了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，需要开发多套界面来适应不同的终端。自适应是为了解决如何才能在不同大小的设备上呈现同样的网页；

        ② 以前自适应布局会开发多套程序，以适配不同的设备大小，不过目前实际开发中，更多的是通过media媒体查询，实现几个关键断点的自适应： (1) 阶梯式自适应 (2) 平滑式自适应。

  3. 流式布局：

        流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度，一些常见布局:左右布局，左侧固定，右侧百分比;左中右布局，中间固定，左右百分比，现在的主流布局方式都是多种布局方案配合起来一起使用，代表结构是栅格系统（bootstrap响应式方案就是media媒体查询结合栅格系统完成的）。

  4. 响应式布局：

        响应式布局的核心就是一套程序适配所有终端，如果严格的说，响应式网站的建设是最困难的，因为你需要考虑pc端的不同尺寸，pad端的不同尺寸，手机端的不同尺寸等等。但是，在实际开发中，结合自适应的特点，适配特定的几个关键节点，就可以相对简单的完成响应式项目开发。