- 上周参与了一个非常有意思的问题,如何同时适应pc端满屏和手机端满屏,并保持屏幕无横向和竖向的滚动条。
我自己思考一下,还是比较混沌的。
梳理了媒体查询、百分比、meta缩放、弹性布局
后来想到了onRisze进行js操作的方法,根据视口的大小重新设置铺设的布局。
2.本周一个契机,遇到了小米su7的发布代码演示稿demo代码
在阅读的过程中,发现了kokomi.js 内置方法里的adaptMobileDOM方法。通过去github代码的阅读,发现思路差不多,但是实现细节要kokoimi.js考虑的更多。
adaptMobile() {
const { base } = this;
const { renderer, camera } = base;
const width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight;
if (width > height) {
renderer.setSize(width, height);
if (camera instanceof THREE.PerspectiveCamera) {
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
} else {
renderer.setSize(height, width);
if (camera instanceof THREE.PerspectiveCamera) {
camera.aspect = height / width;
camera.updateProjectionMatrix();
}
}
}
3.同时,必须承认的是,kokomi本身是和3d渲染相关 视口重置是可以的 那对于普通的C端应用呢? 该如何做呢、 也许需要更细致的分类才行。
比如说 UI界面的像素区分、资讯文章的字体处理
学无止境,继续前行