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

写在前面：

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

个人前端博客网站：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这些，亦可解决。

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

快2023年了，一个初级前端开发要达到什么水平？
第一.明确自己的岗位定位不同的工作岗位职责自然也是不一样的,那么入行不久的前端开发工程师在工作中需要做一些什么样的工作内容呢? 初级前端工程师在企业中往往负责以下几种类型的工作: 参与产品需求讨论 ...
vue3使用vite+setup+ts写一个初级前端项目
Vue3vite+setup+ts项目总结项目说明项目概述本项目纯粹是为了学习和巩固刚学的vue3组合式api和语法糖,再加上网上流行vite+ts+vue,所以便有了这个历时四天的vue3前端 ...
css div随滚动浮动,CSS div部分随的屏幕滚动而滚动的方法
摘要: 此JS就是DIV不分随的屏幕而滚动. 此JS就是DIV不分随的屏幕而滚动. .comment-overlay { position: absolute; left: 0; top: 0; wi ...
初级前端程序员接单，私活，指导
上一篇文章是php初级程序员接单的指导方法,与本文密切相关. 其实,初级前端比起初级后端还是有点劣势的,毕竟就前期来说,后端技术模块确实比前端复杂一点. 初级前端接单,我有几个建议. uniapp u ...
Css+Div设置电脑端显示，手机端不显示代码
在需要隐藏的区域加一个Div,例如想在手机端隐藏kongbiji这张图片,代码如下: <div class="none"><img src="kongb ...
一个初级的前端工程师需要知道些什么？
一个初级的前端工程师需要知道些什么? 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的,底什么是前端后端.后台),了 ...
一个合格的初级前端工程师需要掌握的模块笔记
一个合格的初级前端工程师需要掌握的模块笔记文章目录一个合格的初级前端工程师需要掌握的模块笔记前言 Web模块 html基本结构标签属性事件属性文本标签多媒体标签列表表格表单标签其 ...
谈一谈浏览器解析CSS选择器的过程【前端每日一题-6】
谈一谈浏览器解析CSS选择器的过程? 这是一道发散题,可以根据自己的理解自行解答. 在开始前,我们必须了解一个真相:为什么排版引擎解析 CSS 选择器时一定要从右往左解析? 简单的来说:浏览器从右到左 ...
css div里引用em字体会变斜体_前端开发中7种必要了解的CSS长度单位
众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利.随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长.因此,作为网页设计师和前端开发人员 ...

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

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

最新文章

热门文章