首先理解几个概念:

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

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

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

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

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

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

(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)1920x1080:是指屏幕水平方向有1920的像素点,垂直方向有1080个像素点,大家可以估算一下,1920x1080约为200w,也就是说这块屏幕有将近200w个像素点。
   这里说的像素点实际上不是真正意义上的点,它是有面积的,也可以叫做像素块
   屏幕与图片的分辨率要相匹配才能达到最佳的显示效果。当图片的分辨率小于屏幕的分辨率时,在全屏显示的情况下图片会显得较为模糊。
   当图片的分辨率高于屏幕的分辨率时,在全屏显示的情况下效果也不好。  
 

 



rem+flexible.js适配

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

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

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

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

   rem就是相对于根元素<html>font-size来做计算。而我们的方案中使用rem单位,是能轻易的根据<html>font-size计算出元素的盒模型大小。
 

CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释的更多相关文章

  1. 使用 flexible.js + rem 制作苏宁移动端首页

    一.技术选型 二.搭建相关文件夹 三.设置视口标签以及引入初始化样式文件和js文件 四.body 样式 五.rem 适配方案二 body样式修改 index.css body { min-width: ...

  2. reset.css 和 flexible.js

    重置css默认样式(淘宝): body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, f ...

  3. vue2.0 flexible.js + rem 进行自适应开发

    1.在页面中引入flexible.js base.js /** * flexible.js 阿里前端自适应解决方案 */ ;(function(win, lib) { var doc = win.do ...

  4. 解决WinForm屏幕缩放适配只需修改两个Form的两个属性

    最近要做一个windows下截屏识别文字的程序,调试发现截取的图像显示不完整. 输出了Screen.PrimaryScreen.Bounds.Width获取的值,结果与实际分辨率不同,所以确定了与我的 ...

  5. JS+rem,移动端适配

    window.onresize = function () { setHtmlFz(); } setHtmlFz(); function setHtmlFz() { // 基础值 var baseVa ...

  6. rem适配布局(rem+less+媒体查询 和 rem+flexible.js)

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

  7. Node.js的事件轮询Event Loop原理

    Node.js的事件轮询Event Loop原理解释 事件轮询主要是针对事件队列进行轮询,事件生产者将事件排队放入队列中,队列另外一端有一个线程称为事件消费者会不断查询队列中是否有事件,如果有事件,就 ...

  8. flexible.js在华某为手机上使用rem时,页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  9. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

  10. vue 的rem 配置和flexible.js的应用

    1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动 ...

随机推荐

  1. java使用Timer定时器在指定时间执行程序

    下面是一个利用Timer定时器在每天指定时间执行批处理程序的例子. 有关 java.util.Timer 详细知识请参考API. 值得注意的一点是Timer是单线程顺序执行多个任务的. package ...

  2. 新零售SaaS架构:什么是订单履约系统?

    什么是订单履约系统? 订单履约系统用来管理从接到销售订单,到把货品送到客户手中的整个业务过程.它是上游交易(如销售和客户下单环节)和下游仓储配送(如库存管理.物流)之间的桥梁,确保信息流的顺畅和操作的 ...

  3. C++ 控制台程序的线程分析

    在无任何功能代码的情况下运行控制台,会发现有三个线程在运行 SO 的答案指出,在程序一开始运行时,为加快进程启动,windows 会利用多个 CPU 内核更快地初始化. ntdll.dll 线程实际上 ...

  4. java+mysql学生信息管理系统

    实现:mysql+eclipse(idea设置之后也可运行)+jdk8 功能: 管理员:管理登+管理员注册 学生:添加学生信息+删除学生信息+修改学生信息+查询学生信息+学生列表展示 界面展示: 详情 ...

  5. 【LeetCode二叉树#08】寻找树左下角的值(回溯机制X深度)

    找树左下角的值 力扣题目链接(opens new window) 给定一个二叉树,在树的最后一行找到最左边的值. 示例 1: 示例 2: 思路 层序遍历 这个是很自然的思路,因为层序遍历可以避免对于& ...

  6. 【Azure 媒体服务】Azure Media Service上传的视频资产,如何保证在Transfer编码后音频文件和视频文件不分成两个文件?保持在一个可以直接播放的MP4文件中呢?

    问题描述 Azure Media Service上传的视频资产,如何保证在Transfer编码后音频文件和视频文件不分成两个文件?保持在一个可以直接播放的MP4文件中呢? 问题解答 Azure Med ...

  7. C++ //string字符串拼接

    1 //string字符串拼接 2 #include <iostream> 3 #include<string> 4 5 using namespace std; 6 7 8 ...

  8. Java 辨析之实例化和初始化

    在面向对象编程中,实例化和初始化是两个相关但不同的概念: 实例化(Instantiation): 实例化是指创建一个类的新的具体对象的过程.当程序运行时,通过 new 关键字调用类的构造函数来创建该类 ...

  9. 深入浅出Java多线程(十):CAS

    引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第十篇内容:CAS.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在多线程编程中,对共享资源的安全访问和同步 ...

  10. C#实现软件开机自启动(不需要管理员权限)

    目录 原理简介 使用方法 完整代码 原理简介 本文参考C#/WPF/WinForm/程序实现软件开机自动启动的两种常用方法,将里面中的第一种方法做了封装成AutoStart类,使用时直接两三行代码就可 ...