-
rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem查看全部
-
的负担复旦反对反对法地方查看全部
-
对于background-position-x: x;和background-position-y: y;而言，在Firefox和IE中是不支持的，需使用标准书写方式：background-position: x y; 对于steps(counts,end/start)函数，此函数作用于animation-name中动画函数的相邻两个状态之间，将两个状态之前拆分成counts个帧，因此使用steps()是和animation-name中的对应为：如果animation-name函数中的状态为始末两种，则使用counts>1,将始末两个状态拆分成需要的个数；如果animation-name函数中的状态为多于始末两个状态时，则counts=1，不进行拆分；查看全部
-
背景用%查看全部
-
rem跟着屏幕增缩变化： <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣诞主题</title> <style type="text/css"> section { width: 100%; height: 100%; background: red; } .page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } </style> </head> <body> <section> <div class="page">rem跟着html:font-size变化</div> </section> </body> <script type="text/javascript"> var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = ? }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </html>查看全部
-
技术分解查看全部
-
参考右边代码区域，一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';查看全部
-
参考右边代码区域，一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size查看全部
-
h5查看全部
-
设置3d效果需要在父元素上设置transform-style:preserve-3d;这样子元素才拥有了3d效果，如果孙元素也要有那么需要在子元素上也设置此属性。 父元素设置perspective:length属性之后子元素才可以看到三维视觉 最后需要在子元素上设置x/y/z轴上的旋转角度 transform:rotatex/y/z(number deg)查看全部
-
当需要填充整个元素做背景动态图的时候，使用background-size:100%会让整个背景图片填充，例如课程中的8个海盗船，但是如果将背景的大小按照比例百分比缩放background-size:xxx% xxx%那么就可以用background-size:100%来填充元素查看全部
-
理解steps(x)函数的意义，它是把每段变化过程分为x段执行。例如课程中的0%-100%分为了三段，就可以正确的将雪碧图中三个图片展示出来查看全部
-
看看学习学习查看全部
-
.container { position: relative; -webkit-perspective: 700px; -webkit-transform-style: preserve-3d; -moz-perspective: 700px; -moz-transform-style: preserve-3d; } #card { width: 100%; height: 100%; position: absolute; background-color: red; transform: rotateY(70deg); transform-style:preserve-3d; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(70deg); -webkit-transform-style: preserve-3d; }查看全部
-
背景图等比缩放，那么背景定位也要等比去写查看全部
举报
0/150
提交
取消