标签：200 常用 50% 100px 单位 视口 宽度 font 前端开发
前端开发常用单位
像素（px）
特点：
不随视口变化改变大小
百分比（%）
特点：
- 跟父元素的宽高有关
- 子元素的宽高分别有父元素的对应的宽和高决定
- 子元素的margin和padding设置百分比计算依据是父元素的宽度
- border不能设置百分比
例子：
宽和高
.father{
width:200px;
height:100px;
}
.child{
width:50%;/*200*50%=100px*/
height:50%;/*100*50%=50px*/
}
padding
.father{
width:200px;
height:100px;
}
.child{
padding-top: 50%;/*200*50%=100px*/
padding-bottom: 50%;/*200*50%=100px*/
padding-left: 50%;/*200*50%=100px*/
padding-right: 50%;/*200*50%=100px*/
}
margin
.father{
width:200px;
height:100px;
}
.child{
margin-top: 50%;/*200*50%=100px*/
margin-bottom: 50%;/*200*50%=100px*/
margin-left: 50%;/*200*50%=100px*/
margin-right: 50%;/*200*50%=100px*/
}
em
特点
相对于当前元素的font-size，当前元素没有设置，则向上查找父元素，直到找到设置font-size
rem
特点
- 相对于html下的font-size进行计算，1rem=htlm下font-size大小
- 若html没有设置font-size大小，则有浏览器默认的字体大叫决定，chrome默认font-size=16px
vh(Viewport Width)&vw(Viewport Height)
特点
- 动态单位，依据浏览器视口大小
- 将浏览器视口大小分成100份，1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
vmin&vmax
特点
- vmin: vw和vh中较小的那个
- vmax: vw和vh中较大的那个
- 使用场景: 保证移动开发中屏幕旋转之后尺寸不变
视口
什么是视口?
视口简单理解就是可视区域大小我们称之为视口
在PC端，视口大小就是浏览器窗口可视区域的大小
在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980
移动端自动将视口宽度设置为980带来的问题
虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页，但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小
如何保证在移动端不自动缩放网页的尺寸?
通过meta设置视口大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放
标签：200,常用,50%,100px,单位,视口,宽度,font,前端开发 来源： https://blog.csdn.net/weixin_44748205/article/details/114972861
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。