前端开发

使用pointer-events禁用事件触发

2019-09-03417次阅读css模块
pointer-events:none使元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
前端开发

使用attr()抓取data-*

2019-09-03357次阅读css模块
在标签上自定义属性data-*,通过attr()获取其内容赋值到content上
前端开发

使用transform描绘1px边框

2019-09-03508次阅读css模块
分辨率比较低的屏幕下显示1px的边框会显得模糊,通过::before或::after和transform模拟细腻的1px边框
前端开发

使用text-align-last对齐两端文本

2019-09-03467次阅读css模块
CSS属性text-align-last描述的是一段文本中最后一行在被强制换行之前的对齐规则。text-align-last:justify轻松实现文本两端对齐
前端开发

使用vw定制rem自适应布局

2019-09-03625次阅读css模块
移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制。
前端开发

box-shadow单边阴影

2019-08-23533次阅读css模块
box-shadow以由逗号分隔的列表来描述一个或多个阴影效果。这里记录一下box-shadow单边阴影的实现。
前端开发

移动端横竖屏最佳实践

2019-06-26902次阅读css模块javascript
在移动端经常会遇到根据横竖屏以不同的样式来适配或提醒用户切换为竖屏以保持良好的用户体验需求,这里结合JavaScript&CSS检测手机横竖屏一文做一下总结
前端开发

CSS实现元素的宽高比

2019-06-13726次阅读css模块css
元素的宽高比描述了其宽度与高度之间的比例关系。两种常见的视频宽高比是4:3(20世纪的通用视频格式)和16:9(高清电视和欧洲数字电视的通用)。
前端开发

移动端1px问题

2019-06-05717次阅读css模块
设备像素比大于1的屏幕上,我们写的1px实际上是被多个物理像素渲染,这就会出现1px在有些屏幕上看起来很粗的现象。
前端开发

JavaScript&CSS检测手机横竖屏

2019-06-05577次阅读css模块javascript
JavaScript检测手机横竖屏,window.orientation:获取屏幕旋转方向。CSS检测手机横竖屏orientation: portrait(竖屏)|landscape(横屏)