标签：布局 vh 百分比 width -- 元素 响应 宽度 CSS
原文网址：
简介
说明
本文介绍前端响应式布局的实现方式。
响应式布局简介
响应式布局：只需要一套代码就可以了，它可以适用于所有设备（PC、手机、平板等）。同一页面在不同屏幕尺寸下有不同的布局。
前端的各种布局详见：静态布局、流式布局、自适应布局、响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客
方案1：媒体查询
简介
这是最好用最常用的方案。
使用媒体查询获取设备的尺寸，然后进行布局和样式的设置，从而达到适合不同设备的目的。
| 设备划分 | 小区间 |
|---|---|
| 超小屏幕（手机） | < 768 像素 |
| 小屏设备（平板） | >= 768px ~ < 992px |
| 大屏设备（屏幕显示器） | >= 992px ~ < 1200px |
| 超大屏设备（大屏幕显示器） | >= 1200 像素 |
上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。
示例
/* 初始样式 */
body {
background-color: grey;
}
/* 大型设备（大台式电脑，1200px 起） */
@media screen and (min-width:1200px) {
body {
background-color: yellow;
}
}
/* 中型设备（台式电脑，992px 起） */
@media screen and (min-width:992px) and (max-width:1200px) {
body {
background-color: green;
}
}
/* 小型设备（平板电脑，768px 起） */
@media screen and (min-width:768px) and (max-width:992px) {
body {
background-color: blue;
}
}
/* 超小设备（手机，小于 768px） */
@media screen and (max-width:768px) {
body {
background-color: red;
}
}
方案2：百分比
简介
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高。
子元素height、width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：
- 子元素的 top/left 和 bottom/right 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度/宽度；
- 子元素的 padding 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 width，而与父元素的 height 无关；
- 子元素的 margin 如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的 width；
- border-radius 不一样，如果设置 border-radius 为百分比，则是相对于自身的宽度。
缺点
- border、 font-size 等属性不能用百分比设置。
- 计算困难。如果要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
- 布局复杂。各个属性中如果使用百分比，相对父元素的属性并不是唯一的。
使用场景
对图片和大块布局进行百分比设置。
方案3：Rem
简介
rem是一个相对单位， 1rem = html元素的font-size大小。
有两种方法可以达到适配不同屏幕：
- 媒体查询，在不同分辨率下给 html 的 font-size 赋值。
- js 动态计算赋值
布局思路
- 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
- 高度值可以设置固定值，设计稿有多大，我们就严格有多大
- 所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)
- js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了
缺点
打开页面时候，元素大小会有一个变化过程。
方案4：vw/vh
CSS3中引入了一个新的单位vw/vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：
| 单位 | 含义 |
| vw | 相对于视窗的宽度，1vw 等于视口宽度的1%。即视窗总宽度是100vw |
| vh | 相对于视窗的高度，1vh 等于视口高度的1%。即视窗总高度是100vh |
| vmin | vw和vh中的较小值 |
| vmax | vw和vh中的较大值 |
标签：布局,vh,百分比,width,--,元素,响应,宽度,CSS 来源： https://blog.csdn.net/feiying0canglang/article/details/122097821
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。