共计 2759 个字符，预计需要花费 7 分钟才能阅读完成。
有道笔记这个坑货???? 我的图片都 400 了！
像素
WT:ip5 — 640px*1136px 则图片会平铺 — 调试工具里面 显示 320*568px1.1 像素：px:css pixels 逻辑像素 浏览器使用的抽象单位 可以根据不同设备的关系变大变小 dp,pt: device independent pixesls 设备无关像素 物理像素 dpr: devicePixelRatio 设备像素缩放比 物理像素与逻辑像素的关系 与手机分辨率有关 —-JS window.devicePixelRatio 获取到当前设备的 dprCSS -webkit-device-pixel-ratio -webkit-min-device-pixel-ratio -webkit-max-device-pixel-ratio 进行媒体查询计算公式：1px = (dpr)2 *dp 长度上：1px = 2*dp 解释 640px1136px —> 320568px iphone5 的 dpr = 2 一个逻辑像素被四个物理像素去渲染
1.2 为什么 iphone5 的 dpr = 2 ?dpi: 打印机每英寸打印的墨点数 ppi: 屏幕每英寸的像素数量 ——– 都是用来描述计算机屏幕的像素密度的根据物理像素计算 ppi
ppi 越高，像素密度越高，图像越清晰
ppi 越低，可视度越低，系统默认设置的缩放比越小 — windows 系统系统有默认缩放比，其与 ppi 有关
eg: iphone5–>ppi:360 –> xhdpi –>dpr = 2 总结各种单位关系：
dpr 不同 — 缩放不同，视觉效果不同 — 手淘，统一 dpr
大前端团队 > 移动端页面适配 > image2017-9-4 12:17:52.png 我们已经解决了高清屏和普通屏的缩放问题，之后我们将解决不同屏幕尺寸的适配问题
移动设备上的 PC 页面
Q: 345px 的窗口去查看 1200px 的页面
1.viewport — 浏览器显示页面内容的屏幕区域 document.body.clientWidth
layout viewport 布局视口解决了早期的页面在手机上显示的问题，由于两者之间的宽度趋近，CSS 只需要像在 PC 上那样渲染页面就行，原有的页面结构不会被破坏。在 iOS Safari 中定义了一个 viewport meta 标签，用来创建一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于 PC 显示器，所以 pc 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。visual viewport 视觉视口 可以通过 scale 来控制一个视口用来承载它，这个视口可以简单的认为是手持设备物理屏幕的可视区域，我们称之为（视觉视口）visual viewport，无法对它进行任何设置或者修改标准下的移动端 meta 设置：<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> 为什么不使用默认的 viewport = 980px 而是等于设备宽度
scale: 页面根据页面大小自动调整缩放比 = innerWidth / deviecWidth350px 的页面 显示在 320px 的 viewport 中 缩放比为 1.09<meta name=”viewport” content=”width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,target-densitydpi=device-dpi” />content=”width=device-width 布局 viewport = 设备宽度 initial-scale=1 布局 viewport = 度量 viewportflex 布局：常用场景
兼容问题：ios. Android 4.4 flexAndroid<4.4 flexBox 响应式设计 — 解决多终端处理核心：媒体查询常见参数与语法：
语法：@media all{.box{background:red;}}/*all 媒体类型 and 关键字 (min-width: 400px) 媒体特性 – 闭区间 */ 相对单位
px 略显固定，不能根据尺寸的大小而改变，使用相对单位体验页面兼容性 em – 父节点的 font-size – 多层嵌套下难以维护 rem – html 的 font-size – 可作为全局统一度量 1rem = html 的 font-size 注意：font-size 不要使用 rem
字体大小是趋向于阅读的实用性而并不是排版布局
同理：对于固定元素特性 — 我们不使用 rem 而是使用 px, 确保在不同屏幕下 显示一致 eg:border
常用文字适配处理 – 文字溢出：单行文本：.inaline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 多行文本：.intwoline{display:-webkit-box !important;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2;}rem 动态变化算法默认设计图大小 — 等分 10 份 /75 份 — 确定不同屏幕下一份的大小 =1rem 常规：var rem = width / 10;docEl.style.fontSize = rem + ‘px’;750px/10rem 1rem = 75px = html.font-size — 换算 100px = 100/75rem640px/10rem 1rem = 64px = html.font-size 优化：为了 px 与 rem 换算方便 var winW = window.innerWidth;document.getElementsByTagName(“html”)[0].style.fontSize = winW * 0.15625 + “px”;—————————————————————————-= winW / 7.5 + “px”; 整数 /10750px/75rem 1rem = 10px = html.font-size 100px =100/10rem 原因：chrome font-size => 12px750px/7.5rem 1rem = 100px = html.font-size 100px =100/100rem 根据设计图尺寸不同改变数值手淘 — flexiblehttp://blog.csdn.net/qq_16664…
