移动端设备分辨率汇总

设备 操作系统 实际尺寸 物理尺寸CM 宽度PX 高度PX 设备宽度 每英寸像素 PX密度 纵横比 Apple iPhone XR iOS 6.1 15.5 828 1792 828 326 100% MDPI 19 . 5 : 9 Apple iPhone 8 Plus iOS 5.5 13.9 1080 1920 1080 401 100% MDPI 16 : 9 Apple iPhone 7 Plus iOS 5.5 14.0 1080 1920 1080 401 100% MDPI 9 : 16 Apple iPhone XS iOS 5.8 14.7 1125 2436 1125 4 …

前端逻辑处理工具类

1.去除html标签 export const removeHtmltag = (str) => { return str.replace(/<[^>]+>/g, ”) } 2.获取url参数 export const getQueryString = (name) => { const reg = new RegExp(‘(^|&)’ + name + ‘=([^&]*)(&|$)’, ‘i’); const search = window.location.search.split(‘?’)[1] || ”; const r = s …

前端类型判断工具类

1.是否邮箱 export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s) } 2.是否手机号码 export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s) } 3.是否电话号码 export const isPhone = (s) => { return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s) } 4.是否url地 …

css字符图像生成

实现核心的属性是 background-clip 用于对背景裁剪 属性值: 值 说明 border-box 默认值。背景绘制在边框方框内(剪切成边框方框) padding-box  背景绘制在衬距方框内(剪切成衬距方框) content-box  背景绘制在内容方框内(剪切成内容方框) text  给文本填充图片背景 text-fill-color 用于和背景颜色叠加 <!DOCTYPE html> <html> <head>   <title>背景剪裁属性</title>   <meta http-equiv=“C …

Chrome Extension 开发入门

Chrome Extension 是什么 Chrome Extension 作为浏览器的功能扩展,由 html、 css、 js及 manifest. json 描述文件组成,扩展图标显示在浏览器的地址栏右侧,其实质为crx后缀的压缩包。 基本结构 包含如下5个组件: Manifest Background Script UI Elements Content Script Options Page manifest为必须描述文件。 Manifest 包括插件信息和配置信息,使用 json格式的数据。 {     //(必须)manifest版本,而且必须是2     “manif …

Threejs 光与影

 读过本文章后,你将了解在Threejs中的光与影。 现实世界中,物体显示的颜色是由物体本身的颜色及光照的颜色相互叠加而成,在Threejs的世界里同样如此。 我们看到的景象都是趋于光的反射,才生成的。有的物体会发光,有的不放光,会自发光的物体叫做光源 中,有了光,物体才会有光暗的效果。 开启光影的条件 渲染器开启阴影渲染 光源开启投射阴影 物体开启投射阴影 物体开启接收阴影 renderer.shadowMap.enabled = true; spotLight.castShadow = true; mesh.castShadow = true; plane.receiveShadow = …

Threejs 创建3D交互空间

读过本文章后,你将了解如何在DOM中创建一个可交互式的3D空间。 注:Three.js需要一定的逻辑和数学知识。  1.创建渲染器 首先获取DOM元素,定义一个容器变量。 const container = document.getElementById(‘container’); 然后,将使用Web GL渲染器显示场景。 const renderer = new THREE.WebGLRenderer({   antialias: true }); 设置渲染器并指定参数 antialias (抗锯齿),默认渲染器不会开启抗锯齿。 接下来设置renderer的大小,re …

impress.js 构建令人印象深刻的演讲

1. 简介 impress.js 是一个基于CSS3和现代浏览器,受Prezi.com的启发而创作出来的前端多功能演示js框架,可以用它来替代PowerPoint制作更加酷炫的PPT,官方项目。 impress.js 也有一些缺点:编辑方式繁琐需要学习的东西较多,至少需要一些HTML和CSS的基础知识,其是想要获得一些特殊效果时,更需要了解一些javascript的使用,对于非开发者来讲存在一定门槛。 impress.js比较适合以演讲内容为主的展示,单页只放一个名词或句子,或是一张图片,这样会带来比较出众的效果。 2. 核心 impress 页面间转场的实现是依赖于 CSS3 的 trans …