首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
确定删除此收藏集吗
删除后此收藏集将被移除
取消
确定删除
确定删除此文章吗
删除后此文章将被从当前收藏集中移除
取消
确定删除
编辑收藏集
名称:
描述:
0
/100
公开
当其他人关注此收藏集后不可再更改为隐私
隐私
仅自己可见此收藏集
取消
确定
布局、适配与H5事件
订阅
在掘金
更多收藏集
微信扫码分享
微信
新浪微博
QQ
13篇文章 · 0订阅
「中高级前端」干货!深度解析瀑布流布局
2019年终岁尾,最近对布局相关的内容比较有兴趣,在此整理一下和瀑布流相关的使用场景以及多种实现方案。 瀑布流又称瀑布流式布局,是一种比较流行的页面布局方式,专业的英文名称为[Masonry Layouts]。与传统的分页显示不同,视觉表现为参差不齐的多栏布局,最早是由Pint…
探秘 flex 上下文中神奇的自动 margin
水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这种应该算是最便捷的了: 嗯。这里其实就涉及了一个问题,如何让 margin: auto 在垂直方向上生效? 让元素相对父元素水平居中。但是如果我们想让元素相对父元素垂直居中的话…
浏览器层合成与页面渲染优化
Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个相当有料的话题了。之前开发移动端 H5 页面的时候,就遇到过一个有趣的性能问题 —— 某个卖场页面在 IOS 手机上出…
CSS3硬件加速也有坑
事情要从最近看的《WebKit技术内幕》说起,第二章介绍了网页的结构,其中提到了Webkit硬件加速的方式,会把需要渲染的元素放到特定的『Composited Layer』中,在chrome的控制台可以这样开启:
手把手教你实现「京喜工厂」的CSS动画效果
今年Q1(2020年第一季度)参与了京喜事业部「京喜工厂」业务的前端开发。用户可以通过「京喜工厂」参与口罩、抽纸、大米等商品的“在线生产”,既能趣味造物,又能免费领奖品。目前可以通过「京喜」小程序首页访问该活动。 活动在上线一个月后,PV达到千万的量级,引人注目。有不少前端同学…
使用 Flexible 实现手淘 H5 页面的终端适配
使用 Flexible 实现手淘 H5 页面的终端适配
HTML5原生拖拽/拖放 Drag & Drop 详解
拖放(drap && drop)在我们平时的工作中,经常遇到。它表示:抓取对象以后拖放到另一个位置。目前,它是HTML5标准的一部分。我从几个方面学习并实践这个功能。 然后,我们一步步看下这个过程中,会发生的事情。 在HTML5标准中,为了使元素可拖动,把draggable属性…
📜元素大小与获取各种高度 宽度 距离总结
项目开发中经常需要用到元素大小,网页高度,视口高度,各种距离等等,本文总结了获取各种宽高、距离的方法。 注意:这些方法都不考虑混杂模式,请确保你的文档在标准模式下(填写了正确的doctype)否则获取的值会不准。 1. 获取整个网页高度与宽度 1. 火狐不兼容document.…
拥抱SVG:苦恼于图片适配 in Android?
前言 不管是开发 Android 已久的老司机,还是刚刚上车的新司机,都肯定会对一件事情深恶痛绝:图片适配(尤其是在美工不给力的条件下)!为什么 Android 手机要有这么多不同的分辨率? 为什么我的图片在这台手机上显示地好好的完全符合设计图的要求结果换到另一台手机上就变形了…
面试官:你了解过移动端适配吗?
很多人聊起移动端适配都是懵逼状态,都想口吐芬芳。难道移动端还要适配,直接px写死,其他自适应不就完了吗?其实不然,要求严格的公司会要求缩放比例完全相同,简单说就是,在每个手机上的每一行的字数都要一样。接下来,我们就要细说移动端适配的前世今生 相信我们所有前端开发者,都是见证了手…