jsliang 求职系列 - 40 - CSS 移动端
一 目录
不折腾的前端,和咸鱼有什么区别
目录 |
---|
一 目录 |
二 前言 |
三 移动端使用的单位 |
四 移动端布局总结 |
五 1px 实现 |
六 300ms 点击延迟 |
6.1 jsliang 阐述 |
6.2 浏览器开发商解决方案 |
6.3 JavaScript 解决方案 |
七 参考文献 |
二 前言
关于移动端的一些问题。
三 移动端使用的单位
em
:定义字体大小时以父级的字体大小为基准;定义长度单位时以当前字体大小为基准。rem
:以根元素的字体大小为基准。%
:以父级的宽度为基准。vw/vh
:基于视口的宽度和高度。
四 移动端布局总结
使用
rem
单位。可以拷贝淘宝那份代码直接使用,简单来说就是定义1rem = 16px
,然后配合meta
使用。通过
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 种方法:
new Event
new CustomEvent
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库,可以让我们提前使用指针事件。比如:
谷歌的Polymer
微软的HandJS
@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 国际 许可协议 进行许可。
基于 https://github.com/LiangJunrong/document-library 上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。
jsliang 求职系列 - 40 - CSS 移动端相关推荐
- HTML+CSS+移动端前端
HTML+CSS+移动端前端 写在前面:本文大部分知识内容来源于B站"黑马前端".写此文仅用于个人记录笔记,除此之外绝无他用. 一.HTML 3.网页开发工具: 3.1VSCode ...
- 视频教程-HTML + CSS零基础经典教程系列-HTML5/CSS
HTML + CSS零基础经典教程系列 全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node.JS.PHP.Ja ...
- ML:MLOps系列讲解之《端到端 ML工作流生命周期》解读
ML:MLOps系列讲解之<端到端 ML工作流生命周期>解读 导读:在本节中,我们对基于机器学习的软件开发的典型工作流程进行了高级概述. 目录 3.<端到端 ML工作流生命周期> ...
- [css] 移动端的布局用过媒体查询吗?写出例子看看
[css] 移动端的布局用过媒体查询吗?写出例子看看 @media [type] and [condition] - not [condition] {- } @media [condition] a ...
- [css] 移动端微信页面有哪些兼容性问题及解决方案是什么?
[css] 移动端微信页面有哪些兼容性问题及解决方案是什么? 1.rem方案通过reset js进行适配 2.vw 方案 搭配px to viewport进行适配 个人简介 我是歌谣,欢迎和大家一起交 ...
- [css] 移动端的布局用过媒体查询吗?写一个试试
[css] 移动端的布局用过媒体查询吗?写一个试试 使用过Demo<style>.demo {width: 100px;height: 100px;background: #000000; ...
- [css] 移动端页面不满一屏时如何实现满屏背景?
[css] 移动端页面不满一屏时如何实现满屏背景? body {min-height: 100vh; } 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
- [css] 移动端1px像素的问题及解决方案是什么?
[css] 移动端1px像素的问题及解决方案是什么? viewport结合rem解决像素比问题 比如在devicePixelRatio=2设置meta <meta name="view ...
- 前端求职系列:如何写一份小程序简历(二)
前言 在之前前端求职系列:如何写一份好的简历(一),我们清楚了如何写一份好的简历.那么当我们不满足于纸质简历想实现一个线上的简历如何实现呢?今天给大家带来一个微信小程序简历. 一.项目展示 说明 因为 ...
最新文章
- C++ 11 深度学习(二) 命名空间简介、基本输入输出精解
- python安装报错类型_Python处理验证码第一篇(pytesser初探及报错处理)
- codeforces 734A-C语言解题报告
- BIOS中的UEFI和Legacy启动模式
- 大数据的价值体现有哪些
- redis shell命令
- HtmlDocument.ExecCommand() 方法
- nginx实战(五) 正向代理支持https
- 三角函数中和差角公式的编辑方法
- 个人通过ipv6地址提供公网访问服务
- 逻辑谬误_大规模分布式计算的谬误
- 12点转成0点(原因时间格式化为十二小时制导致)
- 出大事了,涛哥你们Java应用GC后不释放内存
- 宏基微型计算机机箱怎么打开,机箱也智能 自己动手打造自动温控机箱
- echarts实现中国地图的下钻和返回上一级
- css首行缩进字符间距行高_黑暗代码风格的学院:换行,间距和缩进
- 常见Oracle错误都在这了: ORA-00257/ORA-00313/ORA-28000/ORA-28000
- 表白网页自助申请系统
- 关于区块链共识类型:PoW, PoS, DPoS, PoST的解释
- 王者荣耀助手动态服务器维护中,王者荣耀助手动态怎么发不了 | 手游网游页游攻略大全...