关于前端:jsliang-求职系列-40-CSS-移动端

一 目录

不折腾的前端，和咸鱼有什么区别

二 前言

返回目录

对于挪动端的一些问题。

三 挪动端应用的单位

返回目录

• em：定义字体大小时以父级的字体大小为基准；定义长度单位时以以后字体大小为基准。
• rem：以根元素的字体大小为基准。
• %：以父级的宽度为基准。
• vw/vh：基于视口的宽度和高度。

四 挪动端布局总结

返回目录

1. 应用 rem 单位。能够拷贝淘宝那份代码间接应用，简略来说就是定义 1rem = 16px，而后配合 meta 应用。
2. 通过 position: relative/absolute 布局（当初更举荐应用 Flex 布局）

以上为集体教训，更多的没接触过，欢送补充。

五 1px 实现

返回目录

产生的起因：

根本原因是 750px 的设计稿上是 UI 设计师期待的 1px 物理像素，它对应理论 375px 稿子上的 0.5px 设施独立像素。

而 0.5px 设施独立像素对于 IOS-8 反对，对于安卓不反对。

所以安卓会将 0.5px 的设施独立像素渲染成 1px 的设施独立像素，也就是说，安卓在 375px 稿子上的设施独立像素为 1px 时，占 2px 物理像素，更粗。

所以咱们拿到设计稿，要依照像素比 dpr 换算，每次量的单位 = 单位 / dpr，比方 dpr 为 2 的时候，1px 转换为 CSS 当前就是 0.5px。（咱们看的页面成果是按以物理像素来说，这才是问题的要害）

办法一：利用 ::after + transform

div::after {
  display: block;
  content: '';
  border: 1px solid #ccc;
  transform: scaleY(0.5);
}

办法二：利用 box-shadow

div: {box-shadow: 0 0.5px 0 0 #fff;}

六 300ms 点击提早

返回目录

历史起因：

首款 iPhone 公布的时候，因为手机不晓得用户点击一次屏幕，是点击按钮链接，还是要进行双击缩放。

所以 IOS Safari 就期待 300ms 来判断用户须要哪个操作（单击还是双击），而后产品一把抄，其余手机也逐步变成这样了。

6.1 jsliang 论述

返回目录

300ms 是因为首款苹果做了个双击放大的成果，为了能看到用户到底是心愿单击还是双击，所以有个 300ms 的期待，让手机晓得用户想做啥。

一开始还没啥，当初网速越来越快、手机性能越来越好，这个弊病就裸露了。

网上有很多解决方案，说的较多的是浏览器厂商提供 viewport 的设置，还有 pollfill。

然而比拟无效的是 FastClick，它利用的原理是在 touchend 中绑定自定义 click 事件，触发该事件后间接阻止 300ms 后的 click 事件。

实现自定义事件有 3 种办法：

1. new Event
2. new CustomEvent
3. document.createEvent('CustomEvent')

而后通过给按钮绑定 addEventListener(eventName, callback) 来实现。

6.2 浏览器开发商解决方案

返回目录

• 办法一：禁止缩放

<meta name="viewport" content="user-scalable=no, initial-scale=1, maxinmum-scale=1">

缺点：并不能很好解决问题，用户想看图片这些没法双击放大看了。

• 办法二：更改默认的视口宽度

<meta name="viewport" content="width=device-width">

• 总结

对于计划一和计划二，Chrome 是率先反对的，Firefox 紧随其后，然而 Safari 令人头疼的是，它除了双击缩放还有双击滚动操作，如果采纳这种两种计划，那势必连双击滚动也要一起禁用；

6.3 JavaScript 解决方案

返回目录

• 办法一：指针事件的 polyfill

除了 IE，其余大部分浏览器都还不反对指针事件。有一些 JS 库，能够让咱们提前应用指针事件。比方：

1. 谷歌的 Polymer
2. 微软的 HandJS
3. @Rich-Harris 的 Points

• 办法二：FastClick

FastClick 是 FT Labs 专门为解决挪动端浏览器 300 毫秒点击提早问题所开发的一个轻量级的库。

实现原理是检测到 touchend 事件的时候，通过 DOM 自定义事件模仿一个 click 事件，并把浏览器 300ms 之后的 click 阻止掉。

七 参考文献

返回目录

• [x] Mars – mobile needs a hero【浏览倡议：无】
• [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 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。