Catch
首页 第4页

利用vw+rem进行移动端布局

在做移动端布局的时候。利用px进行布局,发现需要进行各种手机的适配。 所以在开发的时候,想着引用lib-flexible库(即手淘的方案),询问了一些同事,会有一些字体和一些诡异的问题。 后来找到了一个很好用的适配方案。利用vw+rem,感觉还不错,所以大胆尝试了一把。 根据CSS3规范,视口单位主要包括以下4个: vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况) 例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出,如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。 兼容性 利用视口单位适配页面 对于移动端开发来说,最为重要的一点是如何适配页面,实现多终端的兼容,不同的适配方式各有千秋,也各有缺点。 就主流的响应式布局、弹性布局来说,通过Media Queries 实现的布局需要配置多个响应断点,而且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率维持不表,而在响应断点切换的瞬间,布局带来断层式的切换变换,如同卡带的唱机般"咔咔咔"地一又一下。 而通过采用rem单位的动态计算的弹性布局,则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小,使得C

4月前 130浏览

stylus安装与自动编译

介绍 stylus是一个css预处理框架。来自node社区,主要用来给node项目进行css预处理支持,但是也可以用作普通静态网页开发,stylus文件后缀是.styl。 stylus安装 npm i stylus -g 运行stylus -h可以获得相关的命令行支持 自动化编译 自动编译文件夹 下面命令-w是自动监视文件,-o是输出文件或目录位置,-c是压缩 stylus -w src/styl -o assets/css -c 自动编译文件 stylus -w src/styl/style.styl -o assets/css/style.css -c

5月前 129浏览

Webpack项目自动化部署到阿里云OSS

笔者在开发Vue项目时每次都要重复如下操作 删除dist目录 yarn build 删除oss文件 把dist目录文件上传到oss上 这样拖慢了开发效率,浪费了很多时间在这种无聊的事情上,于是笔者通过一番查找和学习,使用两个webpack插件(clean-webpack-plugin、aliyunoss-webpack-plugin)解决了以上问题 clean-webpack-plugin的使用已通过之前的文章 webpack在打包前清理dist目录 讲解过,这里不再赘述 aliyunoss-webpack-plugin插件使用 首先安装aliyunoss-webpack-plugin插件 yarn add aliyunoss-webpack-plugin -D // 或者使用 npm i aliyunoss-webpack-plugin -D 修改webpack.prod.conf.js const AliyunossWebpackPlugin = require('aliyunoss-webpack-plugin') const oss = require('../oss') ... plugins: [ ... // 插入到最后面 new AliyunossWebpackPlugin({ buildPath: 'dist/**', region: oss.region, accessKeyId: oss.accessKeyId, accessKeySecret: oss.a

5月前 557浏览

使用YUICompressor压缩JS、CSS优化前端加载速度

性能一直是项目中比较重要的一点,尤其门户网站,对页面的响应要求是很高的,从性能角度上来讲,对于Web端的优化其中重要的一点无疑是JS、CSS文件压缩,图片的融合,尽量减小文件的大小,必免占加载时占用过多的带宽。yuicompressor无疑是一个比较好的压缩工具,是yahoo的一个开源组件,下面介绍yuicompressor压缩JS、CSS文件,及在项目中的使用。 YUICompressor介绍 首先需要从https://github.com/yui/yuicompressor/releases下载yuicompressor的jar文件,目前最新版是2.4.8,把yuicompressor-2.4.8.jar下载下来,一会就用这个jar来压缩文件 yuicompressor需要有java运行环境的支持,先通过java -jar yuicompressor-2.4.8.jar看下效果 —type:文件类型(js|css) —charset:字符串编码 —line-break:在指定的列后面插入一个line-break符号 -v,—verbose: 显示info和warn级别的信息 -o:指定输出的文件位置及文件名 —nomunge:只压缩, 不对局部变量进行混淆 —preserve-semi:保留所有的分号 —disable-optimizations:禁止优化 下面是一个单个文件压缩的命令示例 java -jar /data/lib/yuicompressor-2.4.7.ja

5月前 170浏览

js实现jQuery的addClass、removeClass、toggleClass等方法

function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) { obj.className += " " + cls; } } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } } function toggleClass(obj,cls){ if(hasClass(obj,cls)){ removeClass(obj, cls); } else { addClass(obj, cls); } }

5月前 114浏览

Elasticsearch 基础概念知识

Elasticsearch有几个核心概念。从一开始理解这些概念会对整个学习过程有莫大的帮助。 接近实时(NRT) Elasticsearch是一个接近实时的搜索平台。这意味着,从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟(通常是1秒)。 集群(cluster) 一个集群就是由一个或多个节点组织在一起,它们共同持有你整个的数据,并一起提供索引和搜索功能。一个集群由一个唯一的名字标识,这个名字默认就是 “elasticsearch”。这个名字是重要的,因为一个节点只能通过指定某个集群的名字,来加入这个集群。在产品环境中显式地设定这个名字是一个好 习惯,但是使用默认值来进行测试/开发也是不错的。 节点(node) 一个节点是你集群中的一个服务器,作为集群的一部分,它存储你的数据,参与集群的索引和搜索功能。和集群类似,一个节点也是由一个名字来标识的,默认情况 下,这个名字是一个随机的漫威漫画角色的名字,这个名字会在启动的时候赋予节点。这个名字对于管理工作来说挺重要的,因为在这个管理过程中,你会去确定网 络中的哪些服务器对应于Elasticsearch集群中的哪些节点。 一个节点可以通过配置集群名称的方式来加入一个指定的集群。默认情况下,每个节点都会被安排加入到一个叫做“elasticsearch”的集群中,这意 味着,如果你在你的网络中启动了若干个节点,并假定它们能够相互发现彼此,它们将会自动地形成并加入到一个叫做“elasticsearch”的集群中。 在一个集群里,只要你

5月前 256浏览

webpack在打包前清理dist目录

由于每次build项目都会直接增加新文件到dist目录,所以为了避免每次都要手动删除旧的文件,采用clean-webpack-plugin插件在打包前自动清理dist目录 插件安装 npm install clean-webpack-plugin --save-dev // 或者使用yarn yarn add clean-webpack-plugin -D 修改webpack 我创建的是vue项目,需要修改webpack.prod.conf.js文件 const CleanWebpackPlugin = require('clean-webpack-plugin') ... plugins: [ new CleanWebpackPlugin(['dist']), ... ]

5月前 139浏览

ElasticSearch: Index 和 Type 的区别

原文: Index vs. Type By Adrien Grand 译者: fengchang 对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 type,还是给它新建一个 index?要想回答这个问题,我们必须先理解这两者是怎么实现的。 过去,我们为了让 ES 更容易理解,经常用关系型数据库做一个比喻: index 就像关系型数据库里的 database, type 就像 database 里的 table。但是这并不正确。由于两种数据库存储数据的方式是如此不同,任何比喻都是没有意义的。这种比喻往往会导致对 type 的滥用。 Index 是什么 Index 存储在多个分片中,其中每一个分片都是一个独立的 Lucene Index。这就应该能提醒你,添加新 index 应该有个限度:每个 Lucene Index 都需要消耗一些磁盘,内存和文件描述符。因此,一个大的 index 比多个小 index 效率更高:Lucene Index 的固定开销被摊分到更多文档上了。 另一个重要因素是你准备怎么搜索你的数据。在搜索时,每个分片都需要搜索一次, 然后 ES 会合并来自所有分片的结果。例如,你要搜索 10 个 index,每个 index 有 5 个分片,那么协调这次搜索的节点就需要合并 5x10=50 个分片的结果。这也是一个你需要注意的地方:如果有太多分片的结果需要合并,或者你发起了一个结果巨大的搜索请求,合并任务会需要大量

5月前 80浏览

IntelliJ IDEA 远程调试 Tomcat

准备工作 明确远程服务器的 IP 地址,比如我是:192.168.92.128 关掉服务器防火墙:service iptables stop 本地 Remote Server 配置 添加 Remote Server,如下图 复制 Remote Server 自动生成的 JVM 参数,等下有用,如下图,比如我的是:-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005 在 Host 添加服务器的 IP 地址:192.168.92.128。 把刚刚复制参数加个前缀,变成: Linux(有单引号):export JAVA_OPTS='-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005' Windows(没有单引号):set JAVA_OPTS=-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005 服务器 Tomcat 配置 以 Linux 环境为例 Tomcat 安装在 /usr/program/tomcat7 Tomcat 的执行程序:/usr/program/tomcat7/bin/catalina.sh 编辑 Tomcat 执行程序:vim /usr/program/tomcat7/bin/catalina.sh(Windows 是编辑:cat

5月前 207浏览