• 好程序员web前端培训分享之HTMLCSS学习笔记媒体查询+...

    js首先会获取设备型号,然后根据不同设备添加不同的data-dpr值,比如说1、2或者3,从源码中我们可以看到。if!dpr&scale){ var isAndroid=win.navigator.appVersion.match(/android/gi);var isIPhone=win....
    文章 2020-05-11 457浏览量
  • js中的各种高以及位置总结

    原文:js中的各种高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念...
    文章 2015-01-28 1143浏览量
  • 浅谈移动端的自适应问题——响应式、rem/em、利用Js...

    以上代码实现了利用Js获取设备屏幕的宽度,并根据屏幕的宽度动态改变根元素html的font-siz属性的作用。比如说,对于iphone6而言,屏幕尺寸为750,那么在iPhone6下html的font-size为1px,所以1rem=1px;对于iPhone5而言...
    文章 2018-03-30 2011浏览量
  • 08-移动端开发教程-移动端适配方案

    通过js动态获取屏幕的宽度(document.clientWidth)然后根据屏幕宽度动态计算出rem的实际值。假设,640px的设备 1rem=100px 公式:rem=document.clientWidth/640*100px;(function(doc,win){ var docEle=doc....
    文章 2018-02-08 1998浏览量
  • 理解rem实现响应式布局原理及js动态计算rem

    此时为的10等分 document.documentElement.style.fontSize=width/10+'px' }/首次加载应用,设置一次 init()/监听手机旋转的事件的时机,重新设置 window.addEventListener('orientationchange',init)/监听手机窗口...
    文章 2017-11-22 2361浏览量
  • 原生javascript常用方法

    }JS获取窗体可见范围的与高function getViewSize(){var de=document.documentElement;var db=document.body;var viewW=de.clientWidth=0?db.clientWidth:de.clientWidth;var viewH=de.clientHeight=0?db....
    文章 2021-08-31 58浏览量
  • 使用vue-cropper裁剪正方形上传头像

    main.js里面使用 import VueCropper from 'vue-cropper' Vue.use(VueCropper) 基本使用方法 lt;vueCropper ref="cropper img="option.img autoCrop="true fixedNumber="[1,1] fixed="true gt;lt;vueCropper>选择...
    文章 2019-07-31 3108浏览量
  • 适用于移动设备弹性布局的js脚本(rem单位)

    背景介绍 目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,...这一段代码是为了兼容一部分旧款机器,这些机器无法正常的获取到DPR值,那么我们就只能设置屏幕页面内容宽度为设备宽度。
    文章 2019-01-28 17121浏览量
  • 支付宝小程序代码结构及组成(二)

    rpx(responsive pixel)可以根据屏幕宽度进行自适应,规定屏幕为750rpx。以 Apple iPhone6 为例,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx=375px=750 物理像素,1rpx=0.5px=1 物理像素。样式导入 使用@...
    文章 2020-05-08 403浏览量
  • HaaS UI小程序解决方案进阶教学之二:Canvas显示二维...

    删除不支持的svg相关逻辑将不兼容的canvas操作(qrcode.js会调用一些浏览器支持的api)调整一下canvas.getContext('2d')修改为createCanvasContext(canvas)(HaaS UI中使用createCanvasContext方法获取canvas上下文)...
    文章 2021-08-12 52浏览量
  • 【转】移动浏览器的viewport

    其中CSS像素和设备像素的概念,还有js获取各种高和位置的内容都没有提及,要想了解得更清楚还是推荐看看那两篇文章。以下图片均来自quirksmode.org。桌面浏览器 先说说桌面浏览器上viewport的概念,在桌面浏览器上...
    文章 2017-11-24 1228浏览量
  • 在 JQuery Mobile 中实现瀑布流图库布局

    我没有像Masonry入门教程那样指定列选项,我觉得貌似对我的项目没什么用,通过css盒模型即可较好地控制图片区块的列和间距。内部图片区块的伪代码: lt;div class="post"style="height:@(260/1.0/image1.宽度*...
    文章 2018-01-07 1454浏览量
  • 移动开发屏幕适配分析

    在JavaScript中,可以通过 window.devicePixelRatio 获取到当前设备的dpr。而在CSS中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio 和-webkit-max-device-pixel-ratio 进行媒体查询。二...
    文章 2017-11-14 1254浏览量
  • 带你读《Three.js开发指南:基于WebGL和HTML5在网页上...

    由于Three.js将子对象保存在数组中(最新的对象保存在数组的最后),所以我们可以使用THREE.Scene对象的children属性来获取最后一个添加到场景中的对象,children属性将场景中的所有对象存储为数组。在移除对象时,...
    文章 2019-11-11 1781浏览量
  • 移动端高清、多屏适配方案

    1、设备宽高为375×667,可以理解为设备独立像素(或css像素)。2、dpr为2,根据上面的计算公式,其物理像素就应该×2,为750×1334。用一张图来表现,就是这样(原谅我的盗图): 上图中可以看出,对于这样的css样式: ...
    文章 2017-12-30 1347浏览量
  • 微信小程序开发:canvas 多行文字换行

    获取canvas的的宽 自适应宽(设备宽/750)px var Rpx=(canvasWidth/375).toFixed(2) 画布高度-底部按钮高度 var canvasHeight=res.windowHeight-Rpx*59 使用 wx.createContext 获取绘图上下文 context var context=wx...
    文章 2018-11-29 1814浏览量
  • 移动端H5页面高清多屏适配方案

    设备宽高为375×667,可以理解为设备独立像素(或css像素)。dpr为2,根据上面的计算公式,其物理像素就应该×2,为750×1334。用一张图来表现,就是这样(原谅我的盗图): 上图中可以看出,对于这样的css样式: 1 2 ...
    文章 2017-05-02 1449浏览量
  • Velocity 2011会议分享

    remotejs可以实用console.log来获取页面中的数据,执行js等,解决了如何方便调试的问题 eventrecoder可以用来进行android上web的单元测试 hammerjs 一个JS的shell,基于v8实现,类似nodejs,不过功能要简单很多 其中...
    文章 2017-11-06 1406浏览量
  • 第130天:移动端-rem布局

    如果通过页面套入javaWeb中,那么直接使用"${字段名}"就能获取,注意要js获取java字段需要加双引号。computed:{ 真实姓名 realName:function(){ return this.getQueryVariable('name')|'' }, 身份证 identity:...
    文章 2017-12-30 1031浏览量
  • vuejs开发H5页面总结

    如果通过页面套入javaWeb中,那么直接使用"${字段名}"就能获取,注意要js获取java字段需要加双引号。computed:{ 真实姓名 realName:function(){ return this.getQueryVariable('name')|'' }, 身份证 identity:...
    文章 2018-01-04 845浏览量
  • 移动端页面按手机屏幕分辨率自动缩放的js

    上面的值为逻辑分辨率,调试的时候很难把控页面样式,在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了, var phoneScale=phoneWidth/750;除以的为设计图设计的页面宽度,750...
    文章 2017-12-31 1148浏览量
  • 可折叠Web可能会给我们带来的变化

    这也将会是iPhone折叠屏将会采用的一种高比例:除此之外,不管是可折叠设备还是双屏幕设备,最大的特征就是屏幕变大了,在展开的状态下和平板一样了。这样一来,可用的空间就变大了。可折叠和多屏设备打破了移动...
    文章 2020-08-14 418浏览量
  • 标签实现预加载功能

    元素中包含了一个media属性,因此,当用户在使用较窄屏幕的设备时,较窄的图片将会被预加载,而在较设备上,较的图片将被预加载。然后我们仍需要在header元素上附加合适的图片——通过Window.matchMedia/...
    文章 2018-06-18 1458浏览量
  • 前端面试常见问题汇总

    优点:理想状态是所有屏幕的高比和最初的设计高比一样,或者相差不多,完美适应 缺点:碰到重视高度的设计,或者重视元素间间距的设计,那就玩不开了 以下代码运行的结果是什么,如果希望看到控制台每隔一秒连续...
    文章 2018-07-04 7170浏览量
  • Weex实战分享|企鹅电竞Weex实践和性能优化

    设备宽度deviceWidth是固定的,横屏状态下设备宽度为手机长度,并不是我们的view宽度。看上面的公式,我们可以前端修改viewport宽度750。适配后就如下图所示效果。注意,meta.setViewport执行时机比较晚,如果希望一...
    文章 2018-02-08 7865浏览量
  • 浅谈响应式Web设计与实现思路

    分辨率通厂都是指设备分辨率,即设备屏幕上显示的物理像素总和,以一台“1024×768”分辨率的笔记本为例,这表示设备屏幕的是1024物理像素,高为768物理像素,它展示的像素总数就是1024*768。像素密度(Pixel ...
    文章 2018-06-15 984浏览量
  • Python学习笔记

    每个浏览器打开页面都有UA标识,特殊浏览器可能会自定义UA标示,例如微信内置浏览器,服务端可能会根据UA来验证你的浏览器及设备返回不同页面referer 验证请求来自那个urlip限制 爬虫运行一段时间后有被发现后封禁ip...
    文章 2021-08-11 45浏览量
  • 基于 three.js 的 3D 粒子动效实现

    目前大多数设备都已经支持该方式,需要注意的是在低端的设备上由于硬件设备原因,渲染的速度可能不及基于cpu计算的方式渲染。四、总结 综上所述,实现粒子动效的关键在于计算、维护每个粒子的位置状态,而three.js...
    文章 2019-04-08 2226浏览量
  • 移动端H5多页开发拍门砖经验

    如果通过页面套入javaWeb中,那么直接使用”${字段名}”就能获取,注意要js获取java字段需要加双引号。computed:{ 真实姓名 realName:function(){ return this.getQueryVariable('name')|'' }, 身份证 identity:...
    文章 2018-07-12 2099浏览量
  • Three.js-走进3D的奇妙世界

    相机是用来拍摄的工具,通过控制相机的位置和方向可以获取不同角度的图像。3)渲染器 渲染器利用场景和相机进行渲染,渲染过程好比摄影师拍摄图像,如果只渲染一次就是静态的图像,如果连续渲染就能得到动态的画面。...
    文章 2019-11-28 4279浏览量
1 2 3 4 5 >

云产品推荐

视频直播 大数据计算服务 MaxCompute 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 新零售智能客服 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT 阿里云科技驱动中小企业数字化