你是否经常遇到这样的情况：不同体型的用户使用同一个界面，看起来效果却不相同，甚至出现超出屏幕或者错位等问题？那么这篇文章将会为你提供一个前端设计的解决方案，让你的界面能够适应不同的身体类型，让用户们都能够得到良好的使用体验。
CSS3 Viewport Units
Viewport Units 是 CSS3 中的新特性，它能够让你的设计具有响应式的能力，根据设备的不同，自适应调整设计的尺寸和布局。这里介绍一下常用的单位：
- vw: viewport width，视口宽度，1vw 等于视口宽度的 1%
- vh: viewport height，视口高度，1vh 等于视口高度的 1%
- vmin: viewport min，视口宽高中的最小值
- vmax: viewport max，视口宽高中的最大值
使用这些单位可以让你的设计具有非常好的可扩展性，能够适配不同屏幕尺寸的设备，达到一致的效果。
Media Queries
Media Queries 可以让你在不同的设备上应用不同的 CSS 样式，从而满足不同的设备需求。使用 media queries 可以根据不同设备的屏幕尺寸来调整样式表，因此可以很好的在不同的设备上展示网页。
举个例子，你可以在样式表中写入以下代码：
@media screen and (max-width: 800px) {
.container {
width: 100%;
margin: 0 auto;
padding: 20px;
}
}以上代码表示，当屏幕宽度小于或等于 800px 时，.container 元素的宽度是 100% ，并设置了居中和内边距。要注意，Media Queries 通常要写在样式表的最后，以确保其优先级最高。
Fluid Grids
Fluid Grids 是一种响应式设计中的一种技术，它可以让网页元素的布局可以随着屏幕尺寸而自适应。Fluid Grids 可以通过将网页元素的 CSS 宽度设为百分比或 em 等相对长度单位，从而使网页元素的布局具有灵活性。
使用 Fluid Grids 可以将页面结构分成多列，并使用百分比或 em 等相对长度单位定义列宽。这样即使屏幕大小变化，页面结构也能够保持一致。例如，下面的示例代码将 content 元素分成三列，并使用百分比定义每一列的宽度：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ---- - ----------- ----------- -------- ----- ---------- -- ----------- -- - ------ - ----- - - ----- ---------- ----- - ------ - ----- - - ---- ---------- ---- - ------ - ----- - - ------- ---------- ------- -
以上代码表示将 .container 容器设置为 Flex 布局，使其拥有流式布局的能力，.col 元素可以保证子元素自适应的同时兼容不同的浏览器。.col 元素的 flex-grow 属性定义了每个元素所占空间的可扩展性，而 flex-basis 属性则定义了每个元素的基础尺寸。
总结
以上三种前端设计技术，分别是 Viewport Units、Media Queries 和 Fluid Grids。它们能够让你的设计适应不同的身体类型、不同的设备尺寸、不同的屏幕分辨率，为你的设计增加了响应性和适应性。在你开始设计的时候，你需要考虑到不同的身体类型，采用上述技术，根据不同类型设定不同的样式，便能够提供更好的用户体验。
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------ ----- -------------- ------- ---------- - -------- ----- ---------- ----- - ---- - ----------- ----------- -------- ----- ---------- -- ----------- -- - ------ - ----- - - ----- ---------- ----- ----------------- -------- - ------ - ----- - - ---- ---------- ---- ----------------- -------- - ------ - ----- - - ------- ---------- ------- ----------------- -------- - -------- ------- ------ ---- ------------------ ---- ---------- ------------- ------- ---- ---------- ------------- ------- ---- ---------- ------------- ------- ---- ---------- ------------- ------- ---- ---------- ------------- ------- ---- ---------- ------------- ------- ------ ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c82fe968c7c53b0b78fd8