移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别 1 安装依赖包   npm install postcss-pxtorem --save-dev 2 创建 .postcss.js文件,做webpack相关配置 配置项 autoprefixer: 添加浏览器前缀

项目 为了 兼容各个浏览器,需要加各种 c3前缀,如果手动的加肯定 相对比较麻烦,但是现在有webpack,gulp之类的 工具可以自动给我们加上,可以说效率上加速不少.如果 配置中 做个happypack打包缓存的话,配置的时候需要注意下,自己也踩了坑. 关键的一步就是: { test: /\.(css|scss)$/, loader: ExtractTextPlugin.extract('style',(NODE_ENV=='dev')?'happypack/loader?id=sass':

PostCss是什么? PostCSS在webpack中的基本应用 一.PostCss是什么? 如果有深入学习PostCss需求的话可以参考大漠的资料:https://www.w3cplus.com/blog/tags/516.html 大概来说postcss是一个用来处理css的系统程序,它不是css语处理器,也不是css后处理后处理器,也不是新的语法,也不是优化工具.postcss本身只做两件事,将css转换成css抽象语法树,可以简单的理解为将css转换成js:postcss做的第二件事就

一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本,最后通过编译将源码转换为目标浏览器可用的css代码. 它和stylus的不同之处是它可以通过插件机制灵活地扩展其支持的特性,不像stylus的语法是固定的,它的用途非常多,比如css自动加前缀,使用下一代css语法等等. postcss官方有很多插件,查看插件(https://github.com/

简介 基于 webpack2 实现的多入口项目脚手架,主要使用 extract-text-webpack-plugin 实现 js .css 公共代码提取,html-webpack-plugin 实现 html 多入口,less-loader 实现 less 编译,postcss-loader 配置 autoprefixer 实现自动添加浏览器兼容前缀,html-withimg-loader 实现 html 内引入图片版本号添加和模板功能,babel-loader 实现 ES6 转码功能, ha

webpack使用postcss的autoprefixer插件,并在压缩css时使用了cssnano,处理不当的情况下会导致压缩css后,部分兼容前缀(比如-webkit-)被删除的问题. postcss的autoprefixer配置如下: autoprefixer({ browsers: ['> 1%', 'iOS >= 7',"ie >= 7", 'Android >= 2.4'] }) css压缩的配置如下: //压缩css代码 new OptimizeC

package.json中两个字段含义简介 一直在使用npm包管理器,对于npm install module --save-dev 和 npm install module --save这两个的区别做了一些浅析的理解: dependencies dependencies属性被声明在一个简单的对象中,用来控制包名在一定的版本范围内,版本范围是一个字符串,可以被一个或多个空格分割.dependencied也可以被指定为一个压缩包地址或者一个 git URL 地址. 不要把测试工具或transpil

本文由  网易云发布. 作者:赵雨森 2017年的前端已然没有剧烈的变动,但发展势头仍然不减.语言.标准.框架和库逐渐稳定和完善,各团队再也不用花大把精力放在造轮子上,而更多的是去积累所需的组件库.开发合适的工具以及整合自己的解决方案. 我们云计算技术部前端开发组也不例外,在与云计算其他组一起度过了网易云基础服务(网易蜂巢)去年的快速发展期之后,现在的主要目标已经转为如何更好地加快迭代效率.提升用户体验.提高网页性能.针对这个目标,我们组在这一年中对前端技术.工作模式.技术积累等方面做了整体的优

1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基准:750设计稿: 这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事情! 目标一 .手机适配:就是页面上的尺寸,无论高度,还是宽度,还有字体,随屏幕的宽度变化!这里是屏幕宽度!是不是想到了vw,对,就是这个意思:--最大程度在各个尺寸屏幕上还原设计稿 目标二.px转换成rem:一

前端技术更新迭代的速度令人咂舌,互联网+的风头刚起那几年,前端技术大多还停留在jquery阶段,按需加载还停留在seajs和requirejs的阶段,css3和H5也不过才崭露头角,但经过几年的飞速发展,Angular.Vue和React俨然已形成前端框架的三足鼎立之势,且风头正劲,各领风骚! 看惯了css.sass.less的容颜,惊艳于css3的神奇,向往着下一代css的传奇.今天就简单玩玩下一代的css传奇cssnext(据说阿里早几年前就开始玩cssnext了). 先上几个cssnext

初入职场之时,大多数人都应该考虑过这样的一个问题,如何找到一种实用,简化web流程的方法,在工作之中能有所提升和突破. 学好哪些?基础必须精通! 九层之塔,起于垒土;千里之行,始于足下.入门之前,这些都是必不可少的东西,基础的重要性决定了是在这一行业稳扎稳打还是风雨飘摇. 掌握HTML +CSS, HTML是网页的核心,是一种制作万维网页面的标准语言,这是前端最基本的知识,相当于小学要学习字母拼音的那种.学好CSS是网页外观的重要一点,CSS可以帮助把网页外观做得更加美观. 学好服务器端脚本语言

一.CSS变量 CSS变量是CSS的新特性,大多数浏览器都实现了这个功能,使用CSS变量有利代码复用,而且当我们修改变量值时,所有引用该变量的属性都会发生改变. 定义变量后可以有两种使用方法,第一种时var(var_name),第二种时var(var_name,defaultvalue);当变量不存在时使用默认值. 二.浏览器前缀 实现浏览器前缀可以让我们使用新的属性,且不行影响该属性成为标准后的效果.不同的浏览器的前缀不一样. .container { display: -webkit-box

目录 1. Why Webpack? 2. Webpack上手 2.1 Webpack功能 2.2 需要安装的包 2.3 简易命令 3. Webpack配置文件 3.1 局部webpack打包 3.2 方法改进 3.3 webpack配置文件 4. webpack依赖图 4.1 webpack依赖概念 4.2 webpack.config.js的改名 5. CSS_Loader的具体使用 5.1 为什么需要loader 5.2 loader是什么? 5.3 css-loader的使用 5.3.1

CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W3C推出了第一个正式版本.随后不到两年的时间,1998年5月便推出了第二个版本,一直沿用至今.但是CSS3的制订工作却迟迟没有完成.CSS3最初的草案在1999年便被提出,但是直到今日CSS3规范仍然有部分特性没有完成.如果说ES6与ES5相隔的6年时间让开发者们熬尽了心肝,那么从提案到发布相隔近2

webpack2.0加载postcssloader以及autoprefixer实现自动根据兼容性的需求给css加私有前缀的功能,给开发带来便利, 下面是我的配置信息,亲测有效: 1.webpack.config.js的配置: module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { // vue-loader options go here postcss: [require('autoprefixer')({ b

学习了precss插件包在webpack中的用法后,下面介绍postcss的另一个重要插件cssnext,步骤没有precss用法详细,主要介绍css4的语法,cssnext目前支持了部分新特性,你可以在css4-selectors.com网站上测试你的浏览器是否支持这些css4选择器.cssnext能让未来的css语法在今天的浏览器中工作,fallbacks能让今天的css语法在以前的浏览器上工作. 一.安装postcss插件cssnext cnpm i -D cssnext 二.cssnex

precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package.json #自动生成package.json文件 npm init 2.新建webpack.config.js module.exports = { entry: "./main.js", output: { path: __dirname, // __dirname是node.js中的

webpack 报错 No PostCSS Config found  这个问题我在百度上找了好久,也没有找到解决方案,最后没有办法只能自己去啃官方文档,本案例在本人的webpack 学习感悟中已经写过,但是发现很多人还是没有找到答案,所以就将本问题整理为独立版本.本着互联网分享精神,现将本篇文件分享给大家. 本案例经过本人实测绝对好使. 文件地址 http://pan.baidu.com/s/1mhEUtk8 安装: npm install postcss-import autoprefixe

1. { loader:"postcss-loader", options: { // 如果没有options这个选项将会报错 No PostCSS Config found plugins: (loader) => [ require('autoprefixer')(), //CSS浏览器兼容 ] } } 2.在项目根目录新建postcss.config.js文件,并对postcss进行配置: module.exports = { plugins: { 'autoprefixe

终端里运行的错误: 查了好多资料,最后找到解决办法,改为: const webpack = require('webpack'); // const autoprefixer = require('autoprefixer'); // const values = require('postcss-modules-values'); module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js&qu

不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整.在此,提前祝大家春节快乐!! 前面我已写了6篇相关的Webpack方面的技术知识点,今天我主要分享有关PostCSS方面的技术,PostCSS严格来说不是一款c s s预处理器,而是一个用 JavaScript 工具和插件转换 CSS 代码的工具.它的工作模式是接收样式源代码并交由编译插件处理,最后输出CSS.通过PostC