一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放概念
2023-06-13 09:16:28 时间
写在前面:
- 本文作为本人学习总结之用,同时分享给大家~
- 个人前端博客网站:https://zhangqiang.hk.cn
- 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!
本章你将能学到:
- 结合css、div布局对屏幕尺寸、分辨率、缩放有更深一层的理解。
这几个小知识点,也许我们在日常中,经常有所耳闻,但是具体什么意思呢,总是容易混淆,经过我多次亲身经历开发,特地总结如下(不要小瞧这几个概念哦,这可跟我们css布局开发息息相关):
- 屏幕尺寸,也就是通常我们生活中所说的屏幕大小,23英寸啊、27英寸啊这些,都是我们肉眼可见的大小,也就是指屏幕的对角线尺寸,以英寸单位(1英寸=2.54cm)。
- 分辨率,通常我们的电脑分辨率为1920*1080等,也就是说显示屏上会显示多少个像素点,像素点越多,屏幕自然也就越清晰。
对于分辨率,常用的属于还有下面这些:
720P的分辨率为1280x720像素 1080P的分辨率为1920*1080像素 2k的分辨率为2560*1440像素 4k的分辨率为3840*2160像素 8K的分辨率为7680×4320像素
也就是正常给div一个 width:50px; height:100px;
其中的px
就是像素的意思啦~
- 屏幕缩放(显示文本、应用等项目的大小)
你以为你以为的就是你以为的了?咳,这里所说的缩放指的是这个:
比如我们给一个div 100px的宽度,但是,我们用测量像素的工具一量,咦?!居然不是100像素,变大了??? 好了,就是因为这个缩放的原因,它把我们本应该100%显示的div宽度,变成了125%。实际上,他就是100px,你改成100%显示就好了。
但是,我们有的电脑就是显示125%比较合适,那咋办呢?此刻就要用自适应的布局啦~ flex布局、单位可以给vw、vh这些,亦可解决。
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 1. 并发编程—概念
- 语音信号处理概念
- 蹭热点?炒概念?争议之下,看大厂们如何讲中国元宇宙的故事
- 音视频之音频相关概念介绍
- 虚拟存储技术的概念及特点[通俗易懂]
- 黑盒测试的优缺点_黑盒测试的概念
- python数据可视化从入门到实战_大数据可视化概念
- 二叉树一定是完全二叉树_完全二叉树概念
- 前端必备的 CSS 库,normalize.css
- Linux进程概念(一)
- 【集合论】等价类 ( 等价类概念 | 等价类示例 | 等价类性质 | 商集 | 商集示例 )★
- 【Linux 内核】CFS 调度器 ① ( CFS 完全公平调度器概念 | CFS 调度器虚拟时钟 Virtual Runtime 概念 | 四种进程优先级 | 五种调度类 )
- 【Android 屏幕适配】屏幕适配基础概念 ② ( 像素 px 与 密度无关像素 dip | 像素 px 与 密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 )
- 【Unity3D】正交视图与透视视图 ( 正交视图概念 | 透视视图概念 | 观察点 | 正交视图作用 | 摄像机广角设定 | 透视畸变效果 )
- RAII概念与在Python中的应用
- Redis单例模式的概念及使用方法(redis单例模式)
- SQL Server中自增序列的概念及应用(sqlserver的序列)
- 探索Oracle数据库中的模式概念(oracle中模式的含义)
- 深入了解Redis集群哨兵的概念(redis集群哨兵的概念)
- bloomfilter概念讲解以及代码分析