jsliang求职系列-40-CSS移动端

1.目录前端不折腾，和咸鱼有什么区别？说明6.2浏览器开发解决方案6.3JavaScript解决方案7参考文献2前言返回目录关于移动端的一些问题。3、移动端使用的单位返回目录em：定义字号时，以父级字号为基准；定义长度单位时，以当前字号为基准。rem：基于根元素的字体大小。%：基于父级的宽度。vw/vh：基于视口宽度和高度。4移动端布局总结返回目录使用rem单位。可以从淘宝复制代码直接使用。简单的说就是定义1rem=16px，然后配合meta使用。throughposition:relative/absolutelayout(现在更推荐flexlayout)以上是个人经验，还有更多没接触过，欢迎补充。5、返回目录实现1px的原因：根本原因是750px设计稿是UI设计者期望的1px物理像素，对应实际375px稿上的0.5px设备无关像素。IOS-8支持0.5px设备无关像素，但Android不支持。所以Android会把0.5px的设备无关像素渲染成1px的设备无关像素，也就是说当Android的设备无关像素在375px的稿件上是1px的时候，会占用2px的物理像素，比较厚。所以我们在拿到设计稿的时候，需要根据像素比dpr进行换算，每个量的单位=单位/dpr，比如当dpr为2时，1px换算成CSS就是0.5px。（我们看到的页面效果是基于物理像素的，这是问题的关键）方法一：使用::after+transformdiv::after{display:block;内容：'';边框：1px实心#ccc；transform:scaleY(0.5);}方法二：使用box-shadowdiv:{box-shadow:00.5px00#fff;}6300ms点击延迟返回目录历史原因：第一代iPhone发布时，因为手机不知道用户点击一次屏幕，是点击一个按钮链接，还是双击缩放。于是IOSSafari等待300ms判断用户需要的是哪个操作（单击或双击），然后复制产品，其他手机逐渐变成这样。6.1jsliang解释说返回目录需要300ms，因为苹果先做了一个双击缩放效果。为了看用户是想点击还是双击，有300ms的等待让手机知道用户想做什么。一开始没什么，但是现在网速越来越快，手机性能越来越好，这个弊端就暴露出来了。网上有很多解决方案，大部分都是浏览器厂商提供viewport设置和pollfill。但是比较有效的是FastClick，它利用了在touchend中绑定自定义点击事件的原理，在事件触发后300ms后直接阻塞点击事件。自定义事件的实现方式有3种：newEventnewCustomEventdocument.createEvent('CustomEvent')然后绑定addEventListener(eventName,callback)到按钮上。6.2浏览器开发者解决方案返回目录方法一：禁止缩放缺陷：无法很好解决问题是用户想看图片，但是不能双击放大。方法二：更改默认视口宽度总结对于第一种和第二种方案，Chrome率先支持，Firefox紧随其后，但Safari令人印象深刻.让人头疼的是，除了双击缩放，它还有双击滚动操作。如果使用这两种解决方案，还必须禁用双击滚动；某些浏览器尚不支持指针事件。有一些JS库可以让我们提前使用指针事件。例如：谷歌的Polymer微软的HandJS@Rich-Harris'Points方法二：FastClickFastClick是FTLabs为解决手机浏览器300毫秒点击延迟问题而开发的轻量级库。实现原理是当检测到touchend事件时，通过DOM自定义事件模拟点击事件，阻塞浏览器300ms后的点击。七参考返回目录[x]火星-移动需要英雄[阅读建议：无][x]腾讯移动Web前端知识库[阅读建议：无][x]移动端适配你必须知道的[阅读]建议：30min][x]如何解决移动端Click事件延迟300ms的问题？【阅读建议：20min】【x】设计方案-移动端延迟300ms的原因及解决方案【阅读建议：20min】【x】详解移动端经典REM布局和菜鸟VW布局【阅读建议：30min][x]移动端1px解决方案[阅读建议：30min][x]Retina屏的移动设备如何实现真正的1px线条？[阅读建议：20min][x]rem布局解析[阅读建议：5min]jsliang文档库由梁俊荣根据知识共享署名-非商业性使用-相同方式共享4.0国际许可协议授权使用。
基于https://github.com/LiangJunrong/document-library上的作品。
非本许可协议授权的使用权可从https://creativecommons.org/licenses/by-nc-sa/2.5/cn/获取。