postcss | 易学教程

webpack 学习10 ,css 兼容性处理

阅读更多关于 webpack 学习10 ,css 兼容性处理

这玩意主要将我们一些css3 的样式，加上前缀操作 css兼容性处理：postcss --> postcss-loader postcss-preset-env 帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式 "browserslist": { // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], // 生产环境：默认是看生产环境 "production": [ ">0.2%", "not dead", "not op_mini all" ] } 上面是学习笔记，我们第一步先下载包问大家一个问题，在 vscode 中，打开终端的命令是啥？答案是： ctr + ` __________________________________ 打开终端：下载好之后，我们再修改下配置写好后，在package.json 中也要配置这些都copy 好之后，我们就可以试试了！我加了这句有兼容性的css 我们测试下！各位自动会加上前缀，到此，我们已经解决了，css

vue移动端适配

阅读更多关于 vue移动端适配

1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点<html>字体的大小。所以不用px; 根字体：<html>字体的大小px; px ：你就当成cm(厘米)这样的东西吧；基准：750设计稿；这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作为什么选择rem? 很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性；还有一种就是自己写百分比很不优雅一、理论基础！实现目标一用rem就可以了吧！因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。但是，但是，重点来，如果，根字体的大小默认是16px；那么，我们的1rem；就永远是16px，懂么？也就是如果设计稿是750（放大了一倍，iphone是375pt),我们想要个50%的大小: 50%*357px/16=11.718rem 如果我们写一个11.718rem的宽度

vue项目的骨架及常用组件介绍

阅读更多关于 vue项目的骨架及常用组件介绍

vue项目基础结构一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的"页面"，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态SPA网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。 1.vue-cli：搭建基本的vue项目骨架，脚手架工具 2.sass-loader&node-sass:我是使用的sass作为样式的预编译工具，两者缺一不可，大家也可以自行选择，less,stylus都可以 3.postcss:实现响应式布局的关键，px=>rem。大漠已经提出了基于vw,vh的布局方案，不过我暂时持观望态度。 4.vuex:管理复杂的数据流向，状态机工具，特化的Flux 5.vuex-persistedstate:将vuex中state持久化的工具 6.vue-router:实现SPA间“页面”之间的跳转 7.vue-lazyload:实现图片的懒加载，优化http传输性能 8.vue-awesome-swiper:轮播功能的实现及一些特殊切换效果的完成 9.better-scroll:实现列表滚动及父子组件间的滚动问题 10.axios:http工具，实现向API请求数据，以及拦截器的实现

五大CSS性能优化工具让网站加载更快

阅读更多关于五大CSS性能优化工具让网站加载更快

为什么Web页面的加载速度如此重要？在这个信息化的时代，如果一个网站的加载时间过长，大部分用户会极其不耐烦地选择“关掉”！这让辛辛苦苦熬夜敲代码的程序员们情何以堪，不管网站功能如何强大，用户根本都没来得及看一眼，结果网站访问量越来越少，粉丝转化率越来越低，最后，程序员可能就要下岗了。了解前端开发的程序员都知道，影响网站性能的因素有很多，例如，HTTP请求数量，臃肿的代码，繁重的媒体文件等。如何编写CSS以及如何在浏览器中加载样式表都会对加载时间造成重大影响，接下来推荐五款针对CSS的性能提升工具，以帮助广大前端开发程序员创建一流的网站。 TestMyCSS TestMyCSS是一款免费的在线优化工具，具有很多功能。它可用来检查代码冗余，验证错误，未使用的CSS和寻求最佳做法。程序员只需将网址输入网站的CSS文件，就可以立即开始使用，TestMyCSS可以发现需要改进的所有项目。不仅如此，程序员还可以看到一些有用的提示：如何简化复杂的选择器需要去掉的重复的CSS属性和选择器代码中存在的重要声明的数量不必要的类特异性不必要的IE修复不需要供应商前缀的CSS属性具有标签名的类或ID规则，例如a.primary-link 通用选择器使用不当 Stylelint 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答

Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法

阅读更多关于 Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法

不知不觉地春节要来临了，今天已经是放假的第二天，想想回老家之后所有的时间就不是自己的了，要陪孩子玩，走亲戚等等，我还是趁着在郑州的这两天，把几天后春节要发布的文章给提前整整。在此，提前祝大家春节快乐！！前面我已写了6篇相关的Webpack方面的技术知识点，今天我主要分享有关PostCSS方面的技术,PostCSS严格来说不是一款c s s预处理器，而是一个用 JavaScript 工具和插件转换 CSS 代码的工具。它的工作模式是接收样式源代码并交由编译插件处理，最后输出CSS。通过PostCSS包含的很多功能强大的插件，可以让我们使用更新的CSS特性，保证更好的浏览器兼容性。 PostCSS特点支持未来的css, 使用cssnext书写未来的css 编译速度有了很大的提升丰富的插件系统 c s s可以模块化 ### PostCSS在Webpack中的用法使用npm 进行安装postcss-loader,postcss-loader是连接PostCSS和Webpack。安装命令行如下： npm install postcss-loader --save-dev webpack.config.js配置如下： const path = require('path') const MiniCssExtractPlugin = require('mini-css-extract

在Webstorm中使用Autoprefixer

阅读更多关于在Webstorm中使用Autoprefixer

Autoprefixer是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS，可以实现css3代码自动补全。也可以轻松跟Sass，LESS及Stylus集成，在CSS编译前或编译后运行。详情见， https://github.com/postcss/autoprefixer 具体安装和配置： 1.首先当然是安装node.js; （略） 2.安装Autoprefixer，见 https://github.com/postcss/autoprefixer ： sudo npm install autoprefixer -g 要不要加 sudo ，或者是不是全局安装（ -g ）那就看你自己的环境了。 npm太慢，我是用淘宝的 NPM 镜像的 https://npm.taobao.org/ 3.安装postcss-cli Autoprefixer其实是postcss的插件，见 https://github.com/code42day/postcss-cli sudo npm install postcss-cli -g 4.配置External Tools 打开Webstorm设置，Preferences -> Tools -> External Tools ;点击新增按钮，如图：填写具体配置，例如我的配置，如图： Program:填入你的postcss

项目实战一、基础组件安装

阅读更多关于项目实战一、基础组件安装

1.安装4.2.2版本的react-router-dom cnpm install react-router-dom@^4.2.2 --save 2.安装axios yarn add axios 3.安装4.1.0版本的less-loader cnpm install less-loader@^4.1.0 --save 4.安装后package.json文件如下 5.用yarn eject暴露webpack文件 yarn eject 暴露后会新增一个config文件夹为webpack的配置文件 6.通过yarn add less安装less 7.在webpack.config.js中可以修改配置例如支持less文件的加载修改以下内容在webpack.config.js中添加对less的解析 //解析less文件 { test: /\.less$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work //

项目实战三、antd的babel-plugin-import实现按需加载

阅读更多关于项目实战三、antd的babel-plugin-import实现按需加载

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理） 1.通过yarn add babel-plugin-import 安装babel-plugin-import插件 yarn add babel-plugin-import 2.在webpack.config.js中添加如下代码进行配置antd的按需加载 ['import',{libraryName: 'antd',style:true}], 整体代码如下： 'use strict'; const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); const resolve = require('resolve'); const PnpWebpackPlugin = require('pnp-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InlineChunkHtmlPlugin =

next框架结合lib-flexible，postcss-pxtorem做pc端rem适配

阅读更多关于 next框架结合lib-flexible，postcss-pxtorem做pc端rem适配

安装lib-flexible，postcss-pxtorem yarn add lib-flexible yarn add postcss-pxtorem 配置postcss-pxtorem 在根目录下建立postcss.config.js文件 const pxtorem = require("postcss-pxtorem"); module.exports = { plugins: [ pxtorem({ rootValue: 136,//我这里配置的是我1366分辨率下的基准值，会在下面解释 unitPrecision: 5, propList: ["*"], selectorBlackList: [/^\.nop2r/, /^\.am/,'html'], //排除antd样式，由于我给html设置了min-width，所以把html也排除在外不做rem转换 replace: true, mediaQuery: false, minPixelValue: 0 }) ] } 配置lib-flexible 正常情况下我们在app.js中import ‘lib-flexible’就可以实现引入，但我在引入后启动项目，一直在报 window is not defined ，研究了很久才找到解决方法。 const setRem = async ()=>{ await require(

mac nginx+ 手机查看本地网站+移动端自动rem

阅读更多关于 mac nginx+ 手机查看本地网站+移动端自动rem

https://www.cnblogs.com/tandaxia/p/8810648.html com+shift+G /usr/local location / { root /Users/chenliangfeng/Desktop/贤晟/EqichengV2/Miezz.Eqicheng.Sys/wwwroot; #文件地址 index index.html index.htm; # 文件主目录 proxy_pass https://v2.xsxxjs.com:444; # 后端接口 IP:port 切换代理 } 实习的时候用cors 后来用vue的自带功能现在用nginx完美解决顺便学了nginx 学了四个小时其实用过一遍还是很好用的首先查看本地的ip地址 ifconfig mac是这样看的然后将在同一个网络下将localhost换成ip 比如：我这次看的是 92.168.1.15 原先 http://localhost:8008/#/login 转换 http://192.168.1.15:8008/#/ login 首先安装 postcss-pxtorem npm install postcss-pxtorem -D 在postcss.config.js下增加配置 module.exports = { plugins: { 'autoprefixer': {

订阅 postcss