-
圣诞项目涉及技术1查看全部
-
圣诞项目涉及技术查看全部
-
rem查看全部
-
CSS3的Animation有八个属性 animation-name ：动画名 animation-duration：时间 animation-delay：延时 animation-iteration-count：次数 animation-direction：方向 animation-play-state：控制 animation-fill-mode：状态 animation-timing-function：关键帧变化查看全部
-
rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem查看全部
-
CSS3的Animation有八个属性 1.animation-name ：动画名 2.animation-duration：时间 3.animation-delay：延时 4.animation-iteration-count：次数 5.animation-direction：方向 6.animation-play-state：控制 7.animation-fill-mode：状态 8.animation-timing-function：关键帧变化查看全部
-
技术分解查看全部
-
自适应rem布局 rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。在我的上个七夕主题中采用的是流式布局( 使用 % 百分比定义宽度，高度大都是用px来固定住)。如果使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是相对父级元素的原因 没有得到推广，圣诞主题采用rem布局单位 rem是什么？ rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem 自适应处理： 使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果 参考右边代码区域，一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 给html设置fontSize大小，其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小，从而调整rem的比值关系。慕课的布局是右边区域展示，所以按照移动端的320宽度为标准去做适配的，当然基于这个缩放都是没关系的 总结： 根据实际情况通过设计稿与当前可视区的大小做一个比例关系，通过这个比例进行缩放处理查看全部
-
加油，圣诞之前学完查看全部
-
我查看全部
-
ctx.stroke(); //描边 ctx,strokeStyle = "red"; ctx,strokeRect(10,10,100,190); ctx.fill(); //填充 ctx,fillStyle = "blue"; ctx,fillRect(110,110,100,190);查看全部
-
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; //给html设置fontSize 的大小查看全部
-
自适应rem布局 rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。在我的上个七夕主题中采用的是流式布局( 使用 % 百分比定义宽度，高度大都是用px来固定住)。如果使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是相对父级元素的原因 没有得到推广，圣诞主题采用rem布局单位 rem是什么？ rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem 自适应处理： 使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果 参考右边代码区域，一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 给html设置fontSize大小，其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小，从而调整rem的比值关系。慕课的布局是右边区域展示，所以按照移动端的320宽度为标准去做适配的，当然基于这个缩放都是没关系的 总结： 根据实际情况通过设计稿与当前可视区的大小做一个比例关系，通过这个比例进行缩放处理查看全部
-
rem布局是根据html中的font-size大小来自适应的，em根据什么来布局。他们的区别又是什么查看全部
-
<script type="text/javascript"> var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script>查看全部
举报
0/150
提交
取消