摘要:
CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站点和博客站点用响应式,因为布局简单,响应式足够 1.媒体查询 media query 媒体:电脑,纸张 阅读全文
摘要:
原文链接:https://csswizardry.com/2018/... 背景资料 为了更好地控制产品主页缩略图的显示,(作者)团队选择了css的background-image而不是<img>标签;除了语义上的担忧,在样式的角度看,用css可以更好的控制图片在容器中的大小和位置;这种方式唯一值得 阅读全文
摘要:
在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉。用普通写法border:solid 0.5px red;iPhone可以正常显示,android下几乎所有的浏览器都会把0.5识别为0,即无边框状态. 原理 原理就是给需要加边框的元素插入一个伪类 阅读全文
摘要:
推荐一个css3渐变效果工具,觉得有帮助的可以收藏下。 工具链接 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变( 阅读全文
摘要:
投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shadow:10px 0px 10px -10px black, -10px 0px 10px -10px 阅读全文
摘要:
前言 有过面试经验的同学应该都被问过浏览器兼容性的问题,对于面试官的问题,常常猝不及防,因为通常他们都是这么问的。"来谈谈浏览器兼容的问题吧","你对浏览器的兼容性有了解过吗",那么如何才是我们正确回答这个问题的姿势呢。 虽然面试官的问题十分的笼统,浏览器的兼容性无非还是样式兼容性(css),交互兼 阅读全文
摘要:
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完之后发现自己并不太懂CSS相对单位,也希望分享给大家,所以有了这个译文系列。(若 阅读全文
摘要:
我们都知道background-position属性用来指定背景图片应该出现的位置,可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中,这个属性使用比较频繁,使用过程中,我常混淆,经常切不到自己想要的效果,于是决定好好理解其工作机制,这篇文章就是介绍background-positi 阅读全文
摘要:
一个简单通用的 React 抛物线动画demo Usage import { parabola } from "./parabola" ... onAnimate = () => { const config = { ballWrapper: this.$wrapper, //小球的父容器 orig 阅读全文