chenxiayin2741-优快云博客

转载实现HTML页面保存为图片

一、实现HTML页面保存为图片 1.1 已知可行方案现有已知能够实现网页保存为图片的方案包括：方案1：将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data URI 方案2：使用html2canvas.js实现（...

2017-12-07 19:50:00 3440

转载在Mac上安装nginx

首先，你得安装好homebrew. 然后在命令行终端执行： brew install nginx 通过homebrew，nginx默认被安装在/usr/local/Cellar/nginx/1.6.2, conf文件默认被安装在/usr/local/etc/nginx/nginx....

2017-11-30 15:11:00 253

转载 1111

背景介绍随着海量请求、节假日峰值流量和与日俱增的系统复杂度出现的，很有可能是各种故障。在分析以往案例时我们发现，如果预案充分，即使出现故障，也能及时应对。它能最大程度降低故障的平均恢复时间（MTTR），进而让系统可用程度（SLA）维持在相对较高的水平，将故障损失保持在可控范围内。但是，经...

2017-06-27 16:06:00 236

转载微信页面调试神器－－微信web开发者工具

1 打开微信公众开发者文档点这 2 微信网页开发－》微信web开发者工具－》立即下载体验 3 安装软件，手机和电脑都连接公司／家的无线网（同一网断下） 4 手机代理到电脑（iphone）点击wifi 点击手动输入服务器地址（电脑的ip, 地址前...

2016-11-16 18:19:00 496

转载 css3 动画

属性变化/*transition*//* transition-property 规定设置过渡效果的CSS属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线...

2016-04-06 16:18:00 180

转载 SVG图标在移动端的应用

在移动设备 retina 屏幕经常会遇到图标不清晰的问题。为了解决这个问题，我们有以下几种方法切一张 2倍甚至3倍大小的图，然后用css 进行缩放，这样虽然解决了图标不清晰的问题，但是容量也成倍增加，导致页面加载慢，hybird 包体积变大。使用iconf...

2016-04-04 20:31:00 498

转载 Flexbox——快速布局神器

在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局，那么还算简单，但是制作一个复杂的多列布局，要做的众多浏览器的兼容一致那还是很复杂的。我们通常都是使用浮动或者其他方法来实现这个目的，而其中出现的 bug...

2016-03-29 17:02:00 183

转载使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？那么趁此Amfe阿里无线前端团队双11技术连载...

2016-03-28 11:26:00 382

转载让你的网站在移动端健步如飞

最近一项研究表明,80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间。这不奇怪，因为64%的智能手机用户希望网站可以在4秒内加载完毕，但一半的网站花费了二倍以上的时间，达到了9秒。这篇文章会阐述一些可以使你的网站在移动端跑得更快的技术。 ...

2016-03-25 21:09:00 209

转载视网膜New iPad与普通分辨率iPad页面的兼容处理

一、这是篇经验分享就算不是果粉也应该知道，iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”，其设备分辨比（之前有详细介绍，点击这里查看）是iPad2的两倍。 – iPad mini也是普通分辨比。 iPa...

2016-03-25 15:32:00 167

转载走向视网膜（Retina）的Web时代

维基百科将Retina译为“视网膜”。"Retina"一词，原意是“视网膜”的意思，指显示屏的分辨率极高，使得肉眼无法分辨单个像素。苹果的“iPhone4”和"new iPad"以及“Macbook Pro”中已经使用了Retina(视网膜)技术。这是一种新的屏幕的显示技术。苹果表示...

2016-03-25 15:18:00 272

转载 3.15 晚会—「饿了么」之殇

一.开题有随想 3 月 15 号晚上的 315 晚会，相信很多人都记忆深刻，「饿了么」、「淘宝」等多家知名互联网厂商都被报出了负面的消息，BAT 中的百度也因为群众对其积攒的「怨气」又一次在微博形成热搜。其实我们稳下心来想一想，拿饿了么举例，315 所报出的一些问题并没有我们...

2016-03-25 14:16:00 142

转载 CSS 巧用 :before和:after

前几天的晚上较全面的去看了下css的一些文档和资料，大部分的样式运用都没什么大问题了，只是有些许较陌生，但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多，主要是针对:before和:after写一些内容，还有几个小样式略微带过的介绍下。什么是:before和:a...

2016-03-25 14:15:00 270

转载适配类的文章

淘宝的高清多屏适配方案移动端适配的是什么？转载于:https://my.oschina.net/felumanman/blog/647264...

2016-03-25 14:10:00 139

转载 css js 挺好的规范

地址转载于:https://my.oschina.net/felumanman/blog/647261

2016-03-25 14:05:00 115

转载 web前端响应式设计总结

web前端响应式设计总结一、响应式概述响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容，有不正确的欢迎大家指正。谈到响应式网站，目前比较主流的做法是通过前端通过判断userAgent来做页...

2016-03-22 10:10:00 343

转载 web性能优化之BigPipe

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程：多重指令管线通过不同的处理器执行单元，以达到性能的最佳。虽然BigPipe是对现...

2016-03-14 21:33:00 155

转载 WebView和touch

作为一个前端，而且作为一个做移动端开发的前端，那意味着你要有三头六臂，跟iOS开发哥哥一起打酱油，跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chrome中进行开发的页面，拿着iPhone和安卓机来进行测试，传说中它们的浏览器...

2016-03-12 16:40:00 240

转载跨终端开发必备概念汇总

移动大潮已然到来，跟上节奏是必须。在进行更进一步深入学习和研究各种相关问题之前，有些概念是必须研究透彻的，这将会是以后开发和适配的基石。文章导读：一.单位英寸像素数（Pixel Per Inch，PPI）二.设备像素比率（Device Pixel Ratio...

2016-03-12 16:36:00 352

转载移动端屏幕适配viewport

pc上的网站在移动端上怎么办？如果把移动端的可视区域(320-768)的话，大部分网站都会因为太窄而显示错乱；所以浏览器默认把viewport设置为一个较宽的值 980px或1024px，至少保证PC网站在移动端上可以显示，只不过出现了横向滚动条而已。 ...

2016-03-12 16:32:00 153

转载编写高质量JavaScript代码的一些建议

Medium上看到了两篇关于写高质量JavaScript代码的文章，觉得不错，特此搬过来，记下一笔，以待后续查阅。 JavaScript 作为最受欢迎的编程语言之一，被广泛应用在各个领域：网站、服务端、游戏、操作系统等。跟人类一样，编程语言也是随着时间的推移慢慢进化的，而在进化的...

2016-03-12 16:29:00 84

转载透过浏览器看HTTP缓存

作为前端开发人员，对于我们的站点或应用的缓存机制我们能做的似乎不多，但这些却是与我们关注的性能息息相关的部分，站点没有做任何缓存机制，我们的页面可能会因为资源的下载和渲染变得很慢，但大家都知道去找前端去解决页面慢的问题而不会去找服务端的开发人员。因此，了解相关的缓存机制和充分的利用它...

2016-03-12 16:26:00 103

转载从四个方面帮你做好移动页面性能优化

随着移动互联网的发展，我们越发要关注移动页面的性能优化，今天跟大家谈谈这方面的事情。首先，为什么要最移动页面进行优化？纵观目前移动网络的现状：移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度越来越低，而速度低会造成不良影响，...

2016-03-12 16:17:00 191

转载你应该知道的HTTP头------ETag

在HTTP1.1规范中，新增了一个HTTP头信息：ETag。对Web开发者来说，它是一个非常重要的信息。它是用作缓存使用的两个主要的头信息之一 (另一个是Expires)。除此之外，在REST架构中，它还可以用于控制并发操作(上节中已经大致介绍AtomPub中控制并...

2016-03-11 22:30:00 96

转载去哪儿网前端架构师司徒正美：如何挑选适合的前端框架？

前端框架不断推新，众多IT企业都面临着“如何选择框架”，“是否需要再造轮子”的抉择。去哪儿网前端架构师司徒正美分析了各主流行框架优劣点、适用场景，并针对不同规模的公司、项目给出了相应的前端技术选择方案。最近几年，前端技术迅猛发展，差不多每年都会冒出一款主流的框架。每次新开业务线或启动新项...

2016-02-26 16:55:00 180

转载 jquery jsonp跨域

jsonp下跨域只能使用get 方式，这里不设置默认为get $.ajax({url:'http://xxx.xx.37.247',dataType:'jsonp',jsonpCallback:'myfn',//请求成功后立即执行的方法...

2015-08-18 17:55:00 85

转载网页变成黑白色兼容个浏览器

html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); ...

2015-08-18 14:22:00 791

转载移动web开发经验总结

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。备注：transparent的属性值在android下无效。 2、-webkit-appearance:none可...

2015-08-10 13:36:00 103

转载 ie8+ 常用到的选择器

选择器通配元素 id 类群组后代选择器这些常用的都是ie6+ 层次选择器 E>F子选择器E元素的子元素ie7+E+F兄弟选择器E元素紧邻的兄弟元素ie7+E~F通用选择器E元素后所有匹配的兄弟元素ie7+ 动态伪类选择器...

2015-07-21 16:45:00 244

转载【翻译】@font-face与性能

上一周我在Ajaxian中看到了一篇关于 @font-face 的文章。对于字体文件如何影响web网页效率的问题我已经思考了几个月了，于是我继续读了几篇文章，终于形成了下面这些自己的看法。 FOUT：Flash of Unstyled Text Paul 将Flash of U...

2015-07-15 17:16:00 169

转载 css3 box-sizing

设定元素 box-sizing : border-box; .box1,.box2{float:left;margin-right:20px;height:100px;width:100px;}.box2{padding:5...

2015-07-14 18:25:00 88

转载如何提高移动性能

[技术分享]如何提高移动性能楼主 409 4 | 发表于 2015-3-13 20:49:00 | 倒序浏览 | 阅读模式 ...

2015-07-14 16:04:00 153

转载适用于移动页面的图片延时加载

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">*{...

2015-07-14 15:31:00 146

转载 zepto.js + iscroll.js上拉加载下拉加载的移动端新闻列表页面

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="apple-mobile-web-app-capable"content="yes"><met...

2015-07-13 17:41:00 155

转载根据内容自动变高的textarea

http://www.jacklmoore.com/autosize/ 转载于:https://my.oschina.net/felumanman/blog/475248

2015-07-06 17:14:00 113

转载移动端 reset.css

本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo 基于Normalize.css，根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式。 html{ font-family:"HelveticaNeue",Helvetica,STHei...

2015-06-19 10:11:00 189

转载 font-family 的中文顺序

一、各平台最佳正文字体现状： Windows Windows 在 Vista 之前都以中易宋体（在 Windows 里显示名称为宋体，英文名 SimSun）为简体中文默认字体。它在正文字号时为点阵，尚可接受，但字号稍大就难以接受了。中易宋体没有粗体，它的西文部分也完全没法用。从...

2015-06-05 15:54:00 1150

转载字体渲染

测试环境: Win7 Pro + Chrome（请戳大图）：结论：Windows系统上-webkit-font-smoothing属性不造成区别。 iOS 测试环境:iPad Air + iOS7 + Safari（请戳大图）（iOS上没有Hir...

2015-06-05 15:07:00 250

转载 Serif和Sans-serif字体的区别

在西方国家罗马字母阵营中，字体分为两大种类：SansSerif和Serif，打字机体虽然也属于SansSerif，但由于是等宽字体，所以另外独立出Monospace这一种类，例如在Web中，表示代码时常常要使用等宽字体。　　Serif的意思是，在字的笔划开始及结束的地方有额外的...

2015-06-05 14:59:00 136

转载苹果 windows下的默认字体

1 西文：标准无衬线字体 helvetica Arial和Univers体等 helvetica(瑞士体) : Helvetica是苹果电脑的默认字体 ,Helvetica是一种被广泛使用的的西文字体，于1957年由瑞士字体设计师爱德华德·霍夫...

2015-06-05 14:58:00 1327

空空如也

空空如也