1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 一个初级前端结合css div谈一谈屏幕尺寸 分辨率 缩放概念题

一个初级前端结合css div谈一谈屏幕尺寸 分辨率 缩放概念题

时间:2018-11-13 10:38:12

相关推荐

一个初级前端结合css div谈一谈屏幕尺寸 分辨率 缩放概念题

写在前面:

本文作为本人学习总结之用,同时分享给大家~

个人前端博客网站:

欢迎加入博主的前端学习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这些,亦可解决。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。