本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9327377 作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5&mod=personinfo 这篇文章里有一个问题,可能会使一些同学感到困惑:在大家进行键盘操作后,改变了人物的位置,但是并没有刷新画面,按道理来说应该是看到不到人物的位置改变的(大家看到的还是之前的画…

移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是不一样的.为了使页面在不同分辨率下等比缩放,需要动态的设置Html的字体大小来达到页面等比缩放的效果.我们可以如下设置rem值: function() { var html = document.querySelector("html"); var width = html.getBoun…

对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单位,意指显示器上一个个的点.从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了. 2.分辨率,屏幕上物理像素的数量. 3.设备独立像素(dip),又称密度无关像素.可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素.由相关系统转化为物理像素在…

概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单位,意指显示器上一个个的点.从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了. 分辨率,屏幕上物理像素的数量. 设备独立像素(dip),又称密度无关像素.可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素.由相关系统转化为物理像素在设备上体现. css像素,we…

前置知识: 物理像素(physical pixel,device pixel) 物理像素(设备像素),显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度. 设备独立像素(density-independent pixel,device-independent pixel,DIP/DP/dips) 设备独立像素(密度独立性像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素.dip或dp,(d…

这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到了rem,使用rem为单位,在任何移动端下显示的效果都是一样的. 只要我们在页面的head中引入下面的 rem.js : ! function(n) { var e = n.document, t = e.documentElement, i = 750, d = i / 100, o = "ori…

refresh();    window.onresize = function(){      setTimeout(function(){        refresh();      },10)    };    function refresh() {      let deviceWidth = document.documentElement.clientWidth;      if (deviceWidth > 1200) {        document.documentEle…

移动端用touch还是click? 在移动端开发中,click事件有300ms的延时,由来源于iphone处理双击缩放功能种下的坑.因为用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例.为了区分用户的操作是双击还是单击,就增加了300ms的延时等待!随着touch端界面的发展,用户体验的提高使得300ms让人难以忍受. touch事件存在的问题: 某些场景下存在点击穿透的问题.(在移动端,手指点击一个元素,会经过:touchstart --> touchmo…

视口设置: <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1"> 默认不设置viewport一般可视区宽度在移动端是980 width 可视区的宽度 (number||device-width) user-scalable 是否允许用户缩放 (yes||no) iOS10无…

移动端事件 三个事件 touchstart 手指触摸 相当于PC端 mousedown touchend 手指抬起 相当于PC端 mouseup touchmove 手指滑动 相当于PC端 mousmove 注意: touch事件在chrome的模拟器下,部分版本通过on的方式来添加事件无效,这时候需要事件监听的方法 addEventListener("事件名",函数,冒泡或捕获),它有以下优点: 不会存在事件前后覆盖问题 在chrome的模拟器下可以一直识别 写法如下: box.ad…