本文首发于政采云前端团队博客：WebGL 概念和基础入门 https://www.zoo.team/article/webglabout
https://juejin.cn/post/6951575591099301895
关于WebVR 最近VR的发展十分吸引人们的眼球，很多同学应该也心痒痒的想体验VR设备，然而现在的专业硬件价格还比较高，入手一个估计就要吃土了。但是，对于我们前端开发者来说，我们不仅可以简单地在手机上进行视觉上的VR体验，还可以立马上手进行Web端VR应用的开发！ WebVR是一个实验性的Javascript API，允许HMD（head-mounted displays）连接到web apps，同时能够接受这些设备的位置和动作信息。这让使用Javascript开发VR应用成为可能（当然已经有很
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。
例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。
@media screen and (max-device-width:400px){
以上demo总结来说，使用了 Three.js 库创建了一个简单的绿色立方体模型，并实现了旋转动画效果。 总结一下它的步骤：
WebGL（Web Graphics Library）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，不需要插件，即专门处理计算或处理3D图像的JS API。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为750 px，则共有个750 物理像素，则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。
在最初的六天，我创造了天与地 webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
在做移动端适配的时候，很多人第一反应就是使用 rem ，通过动态设置 html 上的 font-size 来进行页面的自适应，基本原理就是 rem 表示的是 root em ，页面中所有的值都是基于html上的 font-size ，相对的进行对应的变化
CSS Viewport units(视口单位)在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。
很久没有做过移动端的项目了，关于移动端的自适应，最早之前用rem，我个人觉得效果很不错。忘记是哪个大神的文章提到过，lib-flexible有一些问题，建议使用viewport，今天使用一下viewport。
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度。比如：iphone6/7是4.7寸，iphone6/7p是5.5寸。 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0in = 5.
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。
这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。
1. 通配符选择器： *{...}; 选择所有元素； 2. HTML标签选择器：p{...} 、#p{...}、.p{...}; 选择指定的所有标签，指定id，指定类的所有标签； 3. 类选择器选择有特定 class 属性的 HTML 元素，如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。选择所有具有 class="center" 的 元素：p.center；
元素：p.center；
注意： 如果电脑显示的缩放为125%，那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。（因为电脑显示的手机宽度是 ：125%×真实手机宽度）
英文 | https://ishadeed.com/article/use-cases-css-comparison-functions/
HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表。比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性，扩展了媒体类型的功能。
CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。最好避免100vh ，而是依靠javascript设置高度以获得完整的视口体验。
在CSS中，视口单位（Viewport units）听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度，那么你可以设置height: 100vh，这样你就拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可惜的是，事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏，使其几乎无用。最好避免使用100vh，而应该通过javascript设置高度的方式来获得完整的视口体验。
1）媒体查询 @media 是个好东西，至少对像我一样刚入行的小前端做响应式是个不错的选择。
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
写在前面：本人刚刚接触移动端开发，希望自己的见解能够帮助到他人，不足之处还望提醒。
在这个分步指南中，我们将使用一个基于 WebGL 的 3D 图形的框架 three.js， 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转！你也可以使用鼠标滚轮进行缩放。
作为前端工程师，页面布局是基本功。面对悟空中台的海量的活动需求，仅仅有几招常规的布局套路显然是难以招架的，悟空开发者团队从个性化需求中提炼特定场景下的共性特点，设计了多个“创意布局”方案。
viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。
HTML页面在电脑的浏览器显示跟在手机端的浏览器显示效果是不一样的，下面写个div来示例看看。
上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等，你真的能分清这些概念的意义吗？
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。
在上一篇 【HelloCSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题：
用截图工具（截图工具测得的像素等于物理像素）测得CSS中的1px 的等于物理像素1px的 那么他们的比值就是1：1
现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。
屏幕大小指屏幕的对角线的长度，单位一般是英寸。常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。常见手机屏幕查看网址 http://screensiz.es/
听说糙着干活的只靠 px 和 % 闯天下，不知道在看文章的你是不是也是其中一员，哈哈哈哈
CSS比较函数从2020年4月就开始支持了，我喜欢使用这些函数，但最喜欢的是 clamp()，它也是我最常用的一个。在这节课中，我们详细来看下这些比较函数。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
