有道笔记这个坑货????我的图片都400了！像素WT:ip5 — 640px1136px 则图片会平铺— 调试工具里面 显示320568px1.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 = 2dp解释640px1136px —> 320568px iphone5的dpr = 2一个逻辑像素被四个物理像素去渲染1.2 为什么iphone5的dpr = 2 ?dpi:打印机每英寸打印的墨点数ppi: 屏幕每英寸的像素数量 ——–都是用来描述计算机屏幕的像素密度的根据物理像素计算ppippi越高，像素密度越高，图像越清晰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.clientWidthlayout 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…