css布局心得（持续更新）

移动端布局

关于像素的那些事

• css像素（CSS Pixel）： 虚拟像素，浏览器内的一切长度都是以css像素为单位，是相对单位（也就是说会变化的）

• 物理像素（dp）: 也就是我们所说的屏幕分辨率，在设备出厂的时候，屏幕含有多少个物理像素点已经是确定，这些像素点的大小也是固定的了。（但像素点的大小不是固定的，比如同样的尺寸下可以有不同的分辨率，说明这个屏幕下的像素点数量不同，那每个像素点大小肯定是不一样的）

• 设备像素比（DPR）= 物理像素/css像素，含义是几个物理像素对应一个css像素。UI给的几倍图就是要看当前设备的DPR多少来设定。

• 为什么要有几倍图呢？ 举例说明一下，假设设计师给我们一份100*100px的设计稿，此时设备DPR=1说明1个物理像素对应1个css像素，也就是css在浏览器画出来的1px == 设计稿上的1px == 设备显示的1px。当DPR=2说明4个物理像素对应1个css像素，也就是css在浏览器画出来的1px == 设备显示的2px == 设计稿的2px，所以，我们需要将css像素缩小一倍，即0.5px；当dpr=3时，是0.3333px

• 浏览器按住ctrl和+时候放大，改变的是谁？页面为啥会放大？ 在dpr=1，缩放比=1的时候，一个css像素对应一个物理像素。用一个10px10px的div来举例（css里面设定的），浏览器页面放大的时候，可以看到这个div放大了，用审查元素去看，width和height还是10px，那是谁影响了大小呢。首先可以排除物理像素，上面已经说了，物理像素是出厂的时候就已经决定的大小，是不变了。所以只能是css像素大小改变，css是相对单位， *这时候的一个css像素对应的物理像素更多了** ，这就是为什么我们看起来更大了的原因。

常见布局

我们通常提到的布局，有两个共同点：

• 大多数用于 PC 端，因为 PC 端屏幕像素宽度够大，可布局的空间也大；
• 布局是有限空间内的元素排列方式，因为页面设计横向不滚动，纵向无限延伸，所以大多数时候讨论的布局都是对水平方向进行分割。

实际上我们在讨论布局的时候，会把网页上特定的区域进行分列操作。按照分列数目，可以大致分为 3 类，即单列布局、2 列布局、3 列布局。

1.单列布局

单列布局是最常用的一种布局，它的实现效果就是将一个元素作为布局容器，通常设置一个较小的（最大）宽度来保证不同像素宽度屏幕下显示一致。
这种布局的优势在于基本上可以适配超过布局容器宽度的各种显示屏幕，比如网站布局容器宽度为 700px，也就是说超过 700px 宽度的显示屏幕上浏览网站看到的效果是一致的。
但它最大的缺点也是源于此，过度的冗余设计必然会带来浪费。例如，在上面的例子中，其实我的屏幕宽度是足够的，可以显示更多的内容，但是页面两侧却出现了大量空白区域，如果在 4k 甚至更宽的屏幕下，空白区域大小会超过页面内容区域大小！

2.两列布局

2列布局使用频率也非常的高，实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。为了描述方便，我们暂且称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器。

示例网站：

这种布局适用于内容上具有明显主次关系的网页，比如 API 文档页面中左侧显示内容导航，右侧显示文档描述；又比如后台管理系统中左侧显示菜单栏，右侧显示配置页面。相对于单列布局，在屏幕宽度适配方面处理得更好。当屏幕宽度不够时，主要内容布局容器优先显示，次要内容布局容器改为垂直方向显示或隐藏，但有时候也会和单列布局搭配使用，作为单列布局中的子布局使用。

3.三列布局

3 列布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。

实例网站：

如何避免样式冲突

1. 手动命名

最简单有效的命名管理方式就是制定一些命名规则，比如BEM
BEM: BEM 是 Block、Element、Modifier 三个单词的缩写，Block 代表独立的功能组件，Element 代表功能组件的一个组成部分，Modifier 对应状态信息。

<button class="button"></button>
<button class="button button-state-success"></button> 
<button class="button button-state-danger"></button>

2. 工具命名

通过插件将原命名转化成不重复的随机命名，从根本上避免命名冲突。比较著名的解决方案就是 CSS Modules。

.className {
  color: green;
}

借助 css Modules 插件，可以将 css 以 JSON 对象的形式引用和使用。

import styles from "./style.css";
// import { className } from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';

编译之后的代码，样式类名被转化成了随机名称。但这种命名方式带来了一个问题，那就是如果想在引用组件的同时，覆盖它的样式会变得困难，因为编译后的样式名是随机。