欢迎光临
我的个人博客网站

CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释


首先理解几个概念:

(1)屏幕尺寸:屏幕对角线的长度,一般用英寸表示,1英寸=2.54cm。

(2)dp((或者叫dip):设备独立像素,也就是设备屏幕上多少个点。

(3)dpi:印刷行业术语,像素密度,是每英寸上像素点数

(4)ppi:屏幕像素密度,即每英寸(1英寸=2.54厘米)聚集的像素点个数,这里的一英寸还是对角线长度,pixels per inch

(5)dpr:一个px用多少个像素点来显示,iPhone引入了视网膜屏幕的概念,通常来说就是屏幕的点很小,一个像素可以用多个点来渲染,画面更清晰。

    设备像素比 = 设备像素 / 设备独立像素。指CSS逻辑像素对于物理像素的倍数

CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释

 

 (6)设备像素(又称为物理像素):指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,

   和屏幕尺寸大小有关,单位 pt(点(传统长度单位)为1/72英寸=0.35mm))

(7)设备独立像素(也叫密度无关像素或逻辑像素):可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),这个点是没有固定大小的,

   越小越清晰,然后由相关系统转换为物理像素,设备无关像素(Android长度单位),等同于CSS逻辑像素

(8)分辨率:宽度上和高度上最多能显示的物理像素点个数

(9)css像素(也叫虚拟像素):指的是 CSS 样式代码中使用的逻辑像素,在 CSS 规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。

   px 是一个相对单位,相对的是设备像素(device pixel)

(10)公式:PPI=分辨率/屏幕尺寸。
      屏幕尺寸固定,分辨率越高,PPI就越高。
      分辨率固定,屏幕尺寸大了,PPI就越少。
      PPI不变,屏幕尺寸变大,分辨率越大。
(11)1920×1080:是指屏幕水平方向有1920的像素点,垂直方向有1080个像素点,大家可以估算一下,1920×1080约为200w,也就是说这块屏幕有将近200w个像素点。
   这里说的像素点实际上不是真正意义上的点,它是有面积的,也可以叫做像素块
   屏幕与图片的分辨率要相匹配才能达到最佳的显示效果当图片的分辨率小于屏幕的分辨率时,在全屏显示的情况下图片会显得较为模糊。
   当图片的分辨率高于屏幕的分辨率时,在全屏显示的情况下效果也不好。  
 

 
CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释


 

 rem+flexible.js适配

rem: rem属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。

   flexible.js正是利用rem单位相对根元素<html>的font-size来做计算,

   而我们需要做的就是根据不同的屏幕算出html的font-size,

   而页面内的大小单位都根据rem来写,从而实现了自适应。

   rem就是相对于根元素<html>font-size来做计算。而我们的方案中使用rem单位,是能轻易的根据<html>font-size计算出元素的盒模型大小。
 
摘自:http://caibaojian.com/flexible-js-2.html
   https://blog.csdn.net/wuyufa1994/article/details/85143693
赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏