标签：布局 100px 像素 学习 内容 rem 今日 屏幕 font
- 布局
- 圣杯布局 上下固定中间自动
- 双飞翼布局 左右固定 中间自动
- 响应式布局 根据用户的行为或浏览器窗口或者设备型号的不同而改变新的布局排版
- 固定布局 有固定的尺寸，当浏览器窗口缩小时以滚动条形式去显示
- 百分比布局（弹性布局）：左右固定的中间自动
- 等比缩放布局（rem布局）：能够随着变大而变大，缩小而缩小
- 名称解释
屏幕尺寸：屏幕对角线的长度
屏幕分变率：横纵方向上的像素点数
屏幕像素密度：单位尺寸中显示的像素点数 单位ppi
视网膜屏幕：像素密度比平时的要高，人们用肉眼很难分辨
DPR：设备像素比 设备像素和css像素的比值
如何查看DPR----在浏览器中f12——查看console——输入d
- 单位问题
Px 像素具体数值
Em 根据离其最近的父元素的font-size计算
Rem 根据根标签html的font-size计算
Vw 设备视窗宽度的百分比 1vw = 窗口宽度的百分之一
Vh 设备视窗高度的百分比 1vh = 窗口高度的百分之一
Vmax 宽高百分比中较大值
Vmin 宽高百分比较小值
- 单位计算
如果html的font-size设置为vw的话，下边所有的单位都设置成rem就会随着窗口的变化而变化
如果html的font-size设置为100px，如果div的是44px那么他等于多少rem
1rem=100px 44px=0.44rem
想办法将100px转化成vw？
如果将页面放在在320的屏幕上去看，那么1vw=3.2px；
100px里有多少个3.2就是多少vw 100/3.2=31.25vw
标签：布局,100px,像素,学习,内容,rem,今日,屏幕,font 来源： https://blog.csdn.net/weixin_45273844/article/details/119219188
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。