ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

超硬核前端众单位计算方式,自适应响应式爱好者必看

2021-11-27 23:34:48  阅读:188  来源: 互联网

标签:百分比 方式 必看 爱好者 单位 PC 计算 屏幕 硬核


px
这个单位在实际开发中也会用到,但他是无法实现一个屏幕的适应的
计算方式 1px = 1个橡树点
每个屏幕的像素点都是不一样的,大屏幕台式机可能有两千多像素点,小屏幕手机几百橡树点的也很多 所以用px写的页面 除非掺杂其他单位 否则很难适应所有屏幕

in
in 是一种很少见的字体单位,老实说做了这么久开发我也基本没见过谁用这个单位的
计算方式 1in = 1英寸 即2.54厘米
显然也是一种无法适应的单位

cm
也是一种很少见的单位,完全没有在项目中看见过
计算方式 1cm = 1厘米 即 0.394英寸
也是一种不建议使用的单位 无法适应屏幕

mm
又是一个少见的单位 没什么人用
计算方式 1mm = 1毫米 即 0.1厘米
基本没什么用 知道有这个东西就行了

pt
打印的点数,多用于打印功能,页面布局不会用 做打印功能可能会看到
计算方式 1pt = 1磅 72磅 = 1英寸
打印功能时可能会见到 但也基本不用

em(移动端常用)
移动端多见的字体单位,按百分比获取父元素字体大小
计算方式 1em = 父元素font-size 值的百分之百
0.8 0.9em的写法也很常见 就是获取父元素字体大小的百分之八十 九十

rem(响应式常用)
按百分比获取根节点字体大小,用法类似于em 根节点就是 最底部的标签,网页的HTML标签 小程序的 Page
计算方式 1rem = 根节点font-size的百分之一百
PC和手机端都比较常用

rpx(小程序 nui-app常用)
是一种根据屏幕宽度自适应计算的单位,PC端设置此单位无效
计算方式 多大的屏幕宽度都只会有 750rpx 也就是说 1rpx = 屏幕宽度的七百五十分之一
小程序中rpx超好用

vh(PC端常用)
根据百分比获取屏幕高度
计算方式 1vh = 屏幕高度的百分之一
PC端开发超好用

vw(PC端开发常用)
根据百分比获取屏幕宽度
计算方式 1vw = 屏幕宽度的百分之一
PC端开发超好用

%(很常见)
百分比可以说基本布局都会用到
当你把宽度设置百分比 就会按百分比获取父元素宽度
设高度 则按百分比获取父元素高度
计算方式 百分比获取父级单位
超好用

标签:百分比,方式,必看,爱好者,单位,PC,计算,屏幕,硬核
来源: https://blog.csdn.net/weixin_45966674/article/details/121585157

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有