码迷,mamicode.com
首页 > 其他好文 > 详细

关于前端自适应布局的理解

时间:2020-06-15 18:07:11      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:屏幕   效果   元素   颜色   html   技术   解决   才有   宽度   

最近的一个小项目用到了自适应的布局方案,之前做过的一个移动端项目也用到了自适应的布局方案。当时公司只有我一个前端,以前的项目也没有使用过相关的技术,所以我需要从零开始了解相关的技术并且要能够在项目中应用。

首先我们需要了解屏幕显示的一些原理,忽略各种屏幕的实现原理,一块屏幕上有固定数量的小方块,每个小方块就是一个屏幕物理像素点。屏幕的分辨率就是说的屏幕上像素点的数量。分辨率要和屏幕尺寸结合来看才有意义,相同尺寸的屏幕,像素点越多,分辨率就越高,显示效果就越好,所以我们一般说屏幕分辨率高,实际说的是像素密度(每英寸所拥有的像素数量)高。在在移动端屏幕尺寸不同,像素密度也不同的情况小,要想在不同屏幕上保持相同的显示效果是前端布局的一个重要问题。

要想在不同屏幕上保持相同的显示效果,就要保证css的度量单位与屏幕像素密度保持统一。css的长度单位有很多,px,em,rem,百分比,vw,vh等等。我们要如何使用这些长度单位是个大问题。

px是屏幕的逻辑像素,不同屏幕宽度不同,正在100px宽的屏幕上,100px可以与屏幕同宽,而在200px的屏幕上却只有屏幕的一半宽。我们不可能每次获取屏幕宽度,然后更改px值。

接下来是em,em也是基于父元素的font-size而言的,假如父元素的font-size是20px,那么子元素上1em=20px。页面的根标签font-size可能不同,页面上各个标签的字体大小不同也是很常见的,所以我们不可能每个元素都去计算到底是多少em。

百分比就很好理解了,但是百分比的基准是相对于父元素而言的,例如:100px的设计稿上20px,在实际布局中,这个元素的父元素是40px,那么子元素就是20%,这也涉及到一个计算问题。

vw,vh就方便多了,vw是屏幕宽度,vh是屏幕高度,最大值都是100。但是这也涉及到计算问题,并且还存在浏览器兼容问题。但是在确定浏览器能支持的情况下,用来进行页面的基础布局还是很好用的。

最后要说到rem了,rem是基于页面根元素的font-size而言的,假如html标签的font-size是12px,那么1rem=12px。rem解决了px对应屏幕宽度的问题。我们知道设计稿的宽度,我们需要设定一个rem基准,假如设计稿为1000px,我们设定在1000px宽度下,10px为1rem。那么1rem即为宽度的1/100,这样在任意宽度的屏幕下,我们只要把html的font-size设置为屏幕宽度的1/100即可保证显示效果不变。

最后讲讲2倍屏的问题,我们已经知道屏幕上有很多发光点,即像素点,而css中又有px--像素这个长度单位,一个css像素px是不是对应一个发光的像素点呢?css像素实际上是一个相对长度单位,一个css像素有多长实际上是由设备底层决定的,它可以对应任意多个发光像素点,W3C文档规定,1inch = 96px,但是实际上各屏幕并没有遵循这个规定。在同样尺寸,同样分辨率的2块屏幕,1px可能对应1个像素点,也可能对应2个像素点。这就是屏幕设备像素比,2倍屏即1px对应2个像素点。

移动端一般出设计稿是按照ip6的尺寸来的,宽度750px对应屏幕实际的750个像素点,我们把宽度除以2是对应375个逻辑像素点。

最后前端开发免不了要接触图片,图片的分辨率与屏幕的分辨率是2个概念,位图是由一个个颜色小格子组成的,与屏幕的概念类似。100px*100px的图片表示这个图片横向/纵向上各有100个颜色方格,假如我们在100px*100px的屏幕上全屏显示这个图片,那么正好1个像素点显示一个颜色方格,假如我们在1000px*1000px的屏幕上全屏显示,那么就是10个像素点显示一个颜色方格,但是这10个像素点不会正好都显示这个颜色方格的颜色,其中9个像素点会显示这个颜色方格的近似色,这就造成了位图放大失真的问题。

现有的很多rem方案还涉及到屏幕设备像素比,这个跟布局其实没什么关系,主要是用来加载图片资源用的。我们已经知道1px可能对应多个像素点,并且位图颜色格与屏幕像素点数量不同会导致失真的问题,所以同一张图,在设备像素比为2的屏幕上为了保证和设备像素比为1的屏幕同样的显示效果,图片也需要换成2倍分辨率,设备像素比就是用来在不同屏幕上加载不同分辨率的图片。

关于前端自适应布局的理解

标签:屏幕   效果   元素   颜色   html   技术   解决   才有   宽度   

原文地址:https://www.cnblogs.com/KlllB/p/13131924.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!