rem适配
1 .rem是css3新增的一个相对单位。是指相对于根元素的字体大小的单位
function setRootRem() {
const root = document.documentElement;
/** 以iPhone6为例：布局视口为375px，我们把它分成10份，则1rem = 37.5px，
* 这时UI给定一个元素的宽为375px（设备独立像素），
* 我们只需要将它设置为375 / 37.5 = 10rem。
*/
const scale = root.clientWidth / 10
root.style.fontSize = scale + 'px'
}
setRootRem()
window.addEventListener('resize', setRootRem)
//人为的把页面分成了10份。1/10作为根节点的fontSize。
2 .根节点的font-size会随着设备的布局视口的宽度变化而变化，所以这里的元素宽度10rem永远等于当前布局视口的宽度，font-size也会随着设备变化而变化，
3 .由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方
4 .问题 1.lib-flexible不能与响应式布局兼容
1 .网页通过css媒介查询可视区域的宽度，在不同范围应用不同的样式，以便不同尺寸的设备上呈现最佳的界面效果
2 .响应式布局的viewport要采用如下配置<meta name="viewport" content="width=device-width, initial-scale=1">
3 .device-width指的是在移动设备下的宽度，在pc下这个属性是不生效的。
4 .media query里的device-width 属性，始终指向的是设备的宽度，所以响应式布局查询要用到width属性，不用device-width属性没因为在桌面设备下，把浏览器窗口缩小的时候，device-width并不会发生改变，当调整浏览器窗口大小就看不到响应式的效果
7 .默认1rem等于16px
5 .问题2 :1px 边框在lib-flexible下如何处理。
1 .大部分的手机分辨率很高，1个css像素，可能相当于2到3个物理分辨率像素，不像pc，一个css像素始终等于一个物理分辨率像素。
.setTopLine(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid @c;
transform-origin: 0 0;
transform: scaleY(0.5);
}
//transform来缩放,而不是直接写小数
6 .问题3，retina屏下的background-image
1 .devicePixelRatio大于等于2.5的设备都会应用到3x图
2 .其它设备都会应用到2x的图。
7 .问题4 .无法响应系统字体大小
1 .在微信或者其他可以设置字体大小的浏览器中，调整字体大小之后，位置错乱
8 .问题5 .不兼容高倍屏的安卓手机。源码对于高倍安卓手机，一律按照1来处理
9 .问题6 .不兼容iframe。即iframe中展示的内容依然使用的是css像素，在高倍屏下会出问题
vw,vh适配
1 .vw，vh是基于试图窗口的单位，将innerWidth,innerHeight等分为100份
2 .1vw是1%的视觉窗口宽度
viewport + px
1 .开发时不需要关注设备屏幕尺寸的差异，直接按照设计稿上的标注进行开发，无需单位的换算
2 .
<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >
英屏幕尺寸
1 .屏幕尺寸指的是屏幕对角线的长度，一般指的是英寸。一英寸就是一个拇指的宽度
像素
1 .计算机所能呈现信息的最小单位，就是显示屏上最小的点。
2 .一个画面会包含成千上万的像素，每个像素都有自己的颜色信息，他们组合起来，就是一幅完整的画面
屏幕分辨率
1 .指的是一个屏幕由多少个像素点组成。单位是px
css像素的改变
1 .当用户缩放页面，css像素就会被放大，此时的css像素就会跨越更多的设备像素
apple 手机适配
1 .不同的屏幕尺寸，定义不同的基础值，然后还是使用px来做
利用viewport 来做适配高倍屏展示的效果
var metaEL= doc.querySelector('meta[name="viewport"]');
var dpr = window.devicePixelRatio;
var scale = 1 / dpr
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
1物理像素等于1css像素
1 .平时手机图片好像没遇到这种情况。目前只是在canvas渲染图片的时候，手机变模糊。
2 .https://segmentfault.com/a/1190000003730246 基本是这样。之前自己在phaser 里面提取问题感觉还是有点问题，没有第一时间想到要这样来搜索问题
3 .canvas 中绘制一张 300 x 90 的图片，并且要保证它在高清屏中不模糊。那么我们首先要准备一张 600 x 180 的图片
4 .出现问题就是在一个canvas的500*300屏幕的里面渲染一张图片的时候，电脑上面的比手机上的清晰很多
5 .解决方法:https://github.com/jondavidjohn/hidpi-canvas-polyfill 还是一个专门的包
先放大 canvas，再用 CSS 将其限制回原始大小。
一是将 canvas 的高和宽分别乘以 ratio 将其放大，然后又用 CSS 将高和宽限制成初始的大小；二是 hack canvas 中常用的函数，如：fillRect, clearRect, lineTo, arc 等，将它们的参数都乘以 ratio，以方便我们可以像以前那样使用这些方法，而不用在传参的时候手动乘以 ratio
6 .那问题来了，webGL渲染图片的时候也会有这个问题么？
1 .canvas 渲染和webGl渲染的区别?
1 .Canvas就是画布，只要浏览器支持，可以在canvas上获取2D上下文和3D上下文，其中3D上下文一般就是WebGL，当然WebGL也能用于2D绘制，并且WebGL提供硬件渲染加速，性能更好
2 .在不支持 WebGL 的情况下，只能使用 Canvas 2D api，注意这里的降级不是降到 Canvas，它只是一个画布元素，而是降级使用 浏览器提供的 Canvas 2D Api，这就是很多库的兜底策略，如 Three.js, PIXI 等
3 .canvas是一个H5标签，作用是在网页上画图，但是只支持2D，不支持3D
4 .WebGL是一种3D绘图标准，WebGL支持3D，且性能优于canvas
5 .WebGL允许工程师使用JS去调用部分封装过的 OpenGL ES2.0标准接口去 提供硬件级别的3D图形加速功能
三者的关系是 JavaScript -> WebGL -> OpenGL ->.... -> 显卡 并把最终渲染出来图形 呈现到Canvas
7 .canvas
1 .Canvas 是 HTML5 提供的一个特性，你可以把它当做一个载体，简单的说就是一张白纸。而 Canvas 2D 相当于获取了内置的二维图形接口，也就是二维画笔
2 .
8 .webGl
1 .OpenGL是 底层的驱动级的图形接口（是显卡有直接关系的） 类似于 DirectX
2 .但是这种底层的 OpenGL 是 寄生于浏览器的JavaScript无法涉及的
3 .WebGL 允许工程师使用JS 去调用部分封装过的 OpenGL ES2.0 标准接口去 提供硬件级别的3D图形加速功能
4 .webgl实际上用了canvas的一个3d渲染上下文，在绘制平面内容时，和canvas 2d相比，webgl更为直接的利用了gpu硬件，在某些场合，几乎可以摆脱cpu的限制，达到性能极致。
9 .总结
1 .Canvas就是画布，只要浏览器支持，可以在canvas上获取2D上下文和3D上下文，其中3D上下文一般就是WebGL，当然WebGL也能用于2D绘制，并且WebGL提供硬件渲染加速，性能更好
2 .canvas让web具有绘图能力，webGL让canvas具有3D渲染能力
出现模糊图片的原理
1 .https://web.dev/canvas-hidipi/ 原文地址
2 .
vw方案的缺陷
1 .使用margin的时候,很容易造成整体宽度超过100vw，影响布局效果.解决情况就是使用padding
2 .高倍屏适配问题。高倍屏展示图片，1px边框都没有解决
1 .1px,.5px的解决方法：伪元素 + transform scale的方法相比以上几种方案是比较简洁、可控好理解的方式，并且这种方式也支持设置圆角。在腾讯、京东的大部分移动端产品中大都采用的这种适配方案
网友评论