移动web开发之rem布局rem基础rem单位rem(rootem)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。/*根html为12px*/html{font-size:12px;}/*此时div的字体大小就是24px*/div{font-size:2rem;}rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。媒体查询什么是媒体查询媒体查询（MediaQuery）是
移动web开发之rem布局rem基础rem单位rem(rootem)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。/*根html为12px*/html{font-size:12px;}/*此时div的字体大小就是24px*/div{font-size:2rem;}rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。媒体查询什么是媒体查询媒体查询（MediaQuery）是
这部分内容是最近重新复习移动端,做页面时的笔记,这是发布的第一篇关于rem布局实现。内容大致分为页面实现过程中的重新复习到的不确信内容和未掌握内容，和在页面实现中出现的问题和解决。技术选型方案:采用单页面设计技术:rem,媒体查询,less设计图:750px内容整理：*创建common.less是为了供所有页面使用其中样式*在less文件中引入less文件的方法是在index.less中引入common.less@import'common'*@import&link@import是由css提供，只有在ie5以上才能被识别，引用的css会在页面加载完后才会加载引用的css；可以将一个样式文件导
这部分内容是最近重新复习移动端,做页面时的笔记,这是发布的第一篇关于rem布局实现。内容大致分为页面实现过程中的重新复习到的不确信内容和未掌握内容，和在页面实现中出现的问题和解决。技术选型方案:采用单页面设计技术:rem,媒体查询,less设计图:750px内容整理：*创建common.less是为了供所有页面使用其中样式*在less文件中引入less文件的方法是在index.less中引入common.less@import'common'*@import&link@import是由css提供，只有在ie5以上才能被识别，引用的css会在页面加载完后才会加载引用的css；可以将一个样式文件导
华丽炫酷的动画特效总能够让人心旷神怡，不能自已。艳羡之余，如果还能够探究其华丽外表下的实现逻辑，那就是百尺竿头，更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效，并比较不同之处。图片实现最简单，也最容易理解的实现方式就是使用图片。曾几何时，几乎所有前端特效都需要借助图片来完成。实现原理很简单，通过不同的关键帧来“拼接”一段完整的动画影片，每一帧即该动画的每一个瞬间“状态”。首先声明必要的盒子模型：这里以div为例子，声明伪类对象heart。随后通过样式对heart伪类进行控制：.heart{cursor:pointer;height:50px;width
华丽炫酷的动画特效总能够让人心旷神怡，不能自已。艳羡之余，如果还能够探究其华丽外表下的实现逻辑，那就是百尺竿头，更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效，并比较不同之处。图片实现最简单，也最容易理解的实现方式就是使用图片。曾几何时，几乎所有前端特效都需要借助图片来完成。实现原理很简单，通过不同的关键帧来“拼接”一段完整的动画影片，每一帧即该动画的每一个瞬间“状态”。首先声明必要的盒子模型：这里以div为例子，声明伪类对象heart。随后通过样式对heart伪类进行控制：.heart{cursor:pointer;height:50px;width
前言有没有面试的时候，经常被问怎么写一个webpack的loader或者plugin呢？这时候不知道你是不是一脸懵逼。那么这篇文章我们一起来学一下loader的实现，并亲手写一个阉割版的px2rem-loader并为官方的px2rem-loader拓展一些实际项目中不能满足我们使用的功能loader的基本介绍loader的基本使用loader的本质是对源代码进行转换，预处理源代码内容。webpack默认只能处理.js,.json文件，实际项目中会有很多类型的文件，这时候就需要提供loader为webpack拓展处理其它文件的能力。本篇文章重在编写loader，不在这里介绍loader的基本使用
前言有没有面试的时候，经常被问怎么写一个webpack的loader或者plugin呢？这时候不知道你是不是一脸懵逼。那么这篇文章我们一起来学一下loader的实现，并亲手写一个阉割版的px2rem-loader并为官方的px2rem-loader拓展一些实际项目中不能满足我们使用的功能loader的基本介绍loader的基本使用loader的本质是对源代码进行转换，预处理源代码内容。webpack默认只能处理.js,.json文件，实际项目中会有很多类型的文件，这时候就需要提供loader为webpack拓展处理其它文件的能力。本篇文章重在编写loader，不在这里介绍loader的基本使用
1.rem定义？首先css3规定1rem=html根节点的font-size，rem也就是rootem简写。为了方便计算通常设置根节点font-size=100px那么1rem=100px2.动态计算rem原理？核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem=width/n*(window.devicePixelRatio||1)。这里考虑设备像素比。通过此方法，rem大小始终为width的n等分。无论设备可视窗口如何变化，始终设置rem为width的1/n.即实现了百分比布局。3.为
1.rem定义？首先css3规定1rem=html根节点的font-size，rem也就是rootem简写。为了方便计算通常设置根节点font-size=100px那么1rem=100px2.动态计算rem原理？核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem=width/n*(window.devicePixelRatio||1)。这里考虑设备像素比。通过此方法，rem大小始终为width的n等分。无论设备可视窗口如何变化，始终设置rem为width的1/n.即实现了百分比布局。3.为
