一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。 (另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。 rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取) 页面基准320px(20px),html font-size值的计算: [javascript] view plaincopy var ele=document.getElementsByTagName("html")[0],      size=document.body.clientWidth/320*20; ele.style.fontSize=size+"px" 注:需设置meta缩放比1:1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。 vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。 vmin:vw和vh中较小的那个。 vmax:vw和vh中较大的那个。 vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持 其它的单位还有: %:百分比 in:寸 cm:厘米 mm:毫米 pt:point,大约1/72寸 pc:pica,大约6pt,1/6寸 ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀) ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持) 参考资料: http://dev.w3.org/csswg/css-values/#font-relative-lengths http://isux.tencent.com/web-app-rem.html   from:http://blog.csdn.net/jyy_12/article/details/42557241

龙生   07 Nov 2015
View Details

程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 1 2 3 4 5 $(document).ready(function(){     $(document).bind("contextmenu",function(e){             return false;     }); }); 2. 隐藏搜索文本框文字 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(document).ready(function() { $("input.text1").val("Enter your search text here");    textFill($('input.text1')); });      function textFill(input){ //input focus text function      var originalvalue = input.val();      input.focus( function(){                if( $.trim(input.val()) == originalvalue ){ input.val("); }      });      input.blur( function(){                if( $.trim(input.val()) == " ){ input.val(originalvalue); }      }); } 3. 在新窗口中打开链接 1 2 3 4 5 6 7 8 9 10 11 XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid. $(document).ready(function() {    //Example 1: Every link will open in a new window    $('a[href^="http://"]').attr("target", "_blank");     //Example 2: Links with the rel="external" attribute will only open in a new window    $('a[@rel$=’external']').click(function(){          this.target = "_blank";    }); });// how to use <a href="http://www.opensourcehunter.com" rel=external>open link</a> 4. 检测浏览器 注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量 1 2 3 4 5 6 7 8 9 10 11 12 […]

龙生   06 Nov 2015
View Details

css设置各种中文字体如雅黑、黑体、宋体、楷体等等

代码如下: .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明: 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: Mac OS的一些: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 儷黑 Pro:LiHei Pro Medium 儷宋 Pro:LiSong Pro Light 標楷體:BiauKai 蘋果儷中黑:Apple LiGothic Medium 蘋果儷細宋:Apple LiSung Light Windows的一些: 新細明體:PMingLiU 細明體:MingLiU 標楷體:DFKai-SB 黑体:SimHei 宋体:SimSun 新宋体:NSimSun 仿宋:FangSong 楷体:KaiTi 仿宋_GB2312:FangSong_GB2312 楷体_GB2312:KaiTi_GB2312 微軟正黑體:Microsoft JhengHei 微软雅黑体:Microsoft YaHei 装Office会生出来的一些: 隶书:LiSu 幼圆:YouYuan 华文细黑:STXihei 华文楷体:STKaiti 华文宋体:STSong 华文中宋:STZhongsong 华文仿宋:STFangsong 方正舒体:FZShuTi 方正姚体:FZYaoti 华文彩云:STCaiyun 华文琥珀:STHupo 华文隶书:STLiti 华文行楷:STXingkai 华文新魏:STXinwei 注:如果字体的名称是一个单词的,不需要加引号,否则在ie6,7里面会失效,并且后面的样式也会不生效! from:http://www.jb51.net/css/163448.html

龙生   03 Nov 2015
View Details

CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小。让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀。师傅说好东西不能吃独食,于我就在这里给大家吹吹这个从没见过的REM。 在详细介绍rem之前,我们先一起来回顾一下我们常用的两种记量单位,也是备受争论的两个: PX为单位 EM为单位 PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。 em为单位 前面也说了,使用是“px”为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面时会存在一个问题,要解决这个问题,我们可以使用“em”单位。Richard Rutter’在《How to size text using ems》一文中有做过详细的介绍,追至早一点,Richard Rutter也在《How to Size Text in CSS》中进行过深入的剖析。 这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?如果你了解过“em”后,你会觉得这个问题是多问的。前面也简单的介绍过一回,在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的计算公式是: 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。 这里我只是简单的介绍了一个这两个单位的使用,具体一点的大家可以参阅: Best Practices的站长Kyle的《CSS Font-Size: em vs. px vs. pt vs. percent》 Converting px into percentage and em for relative CSS font sizes Em Vs Percent Widths CSS: Units of Measurement Jennifer Kyrnin的Using Points, Pixels, Ems, or Percentages for CSS Fonts Rem为单位 CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。 […]

龙生   11 Oct 2015
View Details

移动开发规范概述

以下规范建议,均是Alloyteam在日常开发过程中总结提炼出的经验,规范具备较好的项目实践,强烈推荐使用 字体设置 使用无衬线字体

  iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878), 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁

  原生Android下中文字体与英文字体都选择默认的无衬线字体

  基础交互 设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为

  移动性能 要考虑Android低端机与2G网络场景下性能 注意! 发布前必要检查项 所有图片必须有进行过压缩 考虑适度的有损压缩,如转化为80%质量的jpg图片 考虑把大图切成多张小图,常见在banner图过大的场景 加载性能优化, 达到打开足够快 数据离线化,考虑将数据缓存在 localStorage 初始请求资源数 < 4 注意! 图片使用CSS Sprites 或 DataURI 外链 CSS 中避免 @import 引入 考虑内嵌小型的静态资源内容 初始请求资源gzip后总体积 < 50kb 静态资源(HTML/CSS/JS/Image)是否优化压缩? 避免打包大型类库 确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间) 注意! 尽量使用CSS3代替图片 初始首屏之外的静态资源(JS/CSS)延迟加载 注意! 初始首屏之外的图片资源按需加载(判断可视区域) 注意! 单页面应用(SPA)考虑延迟加载非首屏业务模块 开启Keep-Alive链路复用 运行性能优化, 达到操作足够流畅 避免 iOS 300+ms 点击延时问题 注意! 缓存 DOM 选择与计算 避免触发页面重绘的操作 Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行 注意! 尽可能使用事件代理,避免批量绑定事件 使用CSS3动画代替JS动画 避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度 HTML结构层级保持足够简单 尽能少的使用CSS高级选择器与通配选择器 Keep it simple […]

龙生   30 Sep 2015
View Details

[转]阻止浏览器记住密码功能干扰表单填充

这里先不说废话,我知道有4种方法,具体可以详细去试试看,针对不同的浏览器有不同的方法: 1.把input type=”password” 改成 input type=”text” 并在后面加上 onfocus=”this.type=’password’”, 2.在文档加载完成后将密码输入框设置为空: window.load = function(){ document.getElementById('密码域ID').value="; }; 3.在用户名和密码之间加上一个隐藏的文本框: <input type="text" name="name"> <input type="hidden">   <input type="password" name="pass"> 4.使用html5的属性: <pre name="code" class="html"><input type="text" name="name" autocomplete="off"> <input type="password" name="pass" autocomplete="off"> from:http://blog.csdn.net/playboyanta123/article/details/43795643

 

龙生   28 Jul 2015
View Details

2015 年最棒的 5 个 HTML5 框架

大多数的 web 开发者一直在用关键点来寻找动态的框架,这样能简化他们的设计和开发工作。

HTML5 框架在所有的 web 浏览器和手机应用上都展现了优秀的性能。它不仅简化了 HTML5 开发中 CSS 开发的沉重负担,还提高了网站的可见性。主要的原因是 HTML5 提供了独有的特征,例如特殊的架构标签,动画,浏览器支持等。

最近,大量的 HTML5 框架在行业内可免费获得,这使得 HTML5 开发者们不知道到底哪一个框架才是最好的。为了避免上述问题,本文在下面会列出 2015 年最流行的 5 个框架,让我们一起以一个简单的方式来开始讨论吧。

如果你是 web 设计者并准备用 HTML5 进行设计工作,现在是时候开始阅读了。

Ionic

http://designlooper.com/wp-content/uploads/2015/05/210.png

Ionic 是一个神奇的框架和强大前端开源系统,使用先进的 web 技术比如 CSS、HTML 和 JS 来创建令人惊叹的手机应用。它已经定制了在所有手机设备上的快速操作,并且确保简单的功能和大量的手机组件。

您可以通过一个命令创建来测试和使用基于任何平台上的 ionic 应用。此外,该框架为它自己的组件提供了一套 Angular 指令(自定义的 HTML 元素),从而使它可以简单的编写一行 HTML 代码。类似指令,它使用视图动画逻辑,异步通信,Angular 的触摸识别和 HTML 清洁处理。

Siimpler 

http://designlooper.com/wp-content/uploads/2015/05/310.png

Siimpler 是一个简单的 HTML 开发框架,他可以通过选择你自己喜欢的部分,来帮助你快速又简单的创建 HTML5 开发结构。根据你的项目需求,你可运用 Siimpler 开发你自己熟悉的前端结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 web 项目。

Foundation

http://designlooper.com/wp-content/uploads/2015/05/41.png

Foundation 是世界上最精妙的前端响应框架,同时,它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口,并且获得了许多的原件来帮助你快速又完美的建立一个响应站点。Foundation 设置了许多关键的特性,例如 HTML,CSS UI 原件,模板,小代码块,含有按钮,表单,字体,导航等功能的响应组件。

LimeJS

针对于所有的最新的桌面浏览器和触屏设备,LimeJS 对于有用户经验的游戏开发者而言是最好的和最强大的开发框架。LimeJS 对于在线游戏开发而言能够带来更好的功能和更快的开发过程,而且适合所有的浏览器和触屏设备。

Enyo

Enyo 是一个开源的 JavaScript 框架,该框架能够让你创建顶级的 HTML5 应用程序,该应用程序能够运行在各种各样的电子设备上,比如说手机,台式机,笔记本,电视,以及 web 应用。对于很多流行的手机公司开发的重要应用都是采用该框架实现的。

最后:

这篇文章谈论的是对于一个 HTML 开发公司的独特的功能,操作,需求,以及 HTML5 框架的最好的表现。

from:http://www.oschina.net/translate/top-html5-frameworks-in-2015

JavaScript超轻量级框架——Nuclear

Nuclear 是腾讯 AlloyTeam 团队开发的一款形似 React 的超轻量级框架(大小16k,gzip后6k)。 纯粹的javascript Nuclear不需要jsx,你只需要使用纯粹的javascript就可以使用面向对象的方式去编写各式各样的组件。Nuclear的目标是让布局、样式、数据、事件、行为完全独立,让程序更加易维护、可扩展。 HTML+CSS Nuclear没有虚拟Dom的概念,完整支持HTML和CSS所有功能,你完全可以使用HTML+CSS进行页面布局排版,放心使用HTML5和CSS3大量的酷炫特性吧! observejs Nuclear使用observejs进行数据变更监听通知视图全部刷新或者局部刷新,以空间换取时间的方式提高应用程序的性能。 简单的示例

Nuclear通过Nuclear.create方法创建结构型组件和非结构型组件,这个例子就是结构型组件。 创建结构型必须包含render()方法,该方法返回渲染的模板,Nuclear使用mustache.js作为模板渲染引擎,创建组件new HelloMessage的第一个参数是组件的容器,第二个参数就是提供给模板引擎的数据,并且可以任何方法都可通过this.option访问该数据。 感谢: observe.js react.js mustache.js class.js   首页:http://alloyteam.github.io/Nuclear/

龙生   09 Jun 2015
View Details

20 款超棒免费的 Bootstrap 管理和前端模板

1. SB Admin 2 Details & Download 2. Admin Lite Details & Download 3. Director Responsive Admin Template Free Details & Download 4. Free Bootstrap Admin Template Dream Details & Download 5. Dashgum – Free Dashboard Details & Download 6. Free Responsive Admin Template – Zontal Admin Details & Download 7. Free Download Bootstrap Admin Template Details & Download 8. Janux – Free Responsive Admin Dashboard Template Details & Download 9. Joli – Free Responsive Bootstrap Admin Dashboard Template Details & Download 10. KAdmin – Free Responsive Admin […]

龙生   18 May 2015
View Details

10 款免费的 jQuery 图像缩放插件

设计电子商务网站必知的十款免费  jQuery 图像缩放插件 Jquery 图像缩放插件不仅简单易用,而且还能够给予用户更好的体验。你只需要在图像或产品上移动鼠标,你将看到图片或产品的详细信息。 今 天,我们来分享一些 jQuery 图像缩放插件。事实上,图像缩放是很多在线购物网站最基本的组成部分。如果你是开发人员,你想在网站中使用图像缩放功能的话,推荐你使用下面十款  jquery 图像缩放插件。你可以根据需要,选择任意你想要的图像缩放插件,而且还免费哦。 EasyZoom Demo | Download EasyZoom 是一个 jQuery 图像缩放和平移插件。它支持触摸屏设备,且能用 CSS 来设计你想要的效果。 zoom.js Demo | Download zoom.js 是一款灵巧的 jQuery 图像缩放插件。点击图片,即可放大/缩小你的图片。更有趣的是,只要你滚动图片即可查看过去浏览过的图片。 picZoomer Demo | Download picZoomer 是一个非常小的 jQuery 插件,通过鼠标悬停放大图像,同时支持缩略图实现导航。你可以在电子商务网站使用该插件创建一个产品浏览页面,它允许访问者通过缩略图查看产品的的不同照片,且支持单独放大照片。 jQuery Zoom Demo | Download jQuery Zoom 是一个易于使用的 jQuery 图像缩放插件,你可以通过点击鼠标、抓取动作和切换动作来实现缩放图像。 WM Zoom Demo | Download WM Zoom 能够在图像中创建一个放大镜,并在旁边显示其高清晰度的图像。此外,它内置一个变焦功能,当你的鼠标悬停在图像上,能够放大图像。 BZoom Demo | Download BZoom 支持创建缩略图导航,并支持鼠标悬停时,在旁边显示特定区域的高清晰度图像。 elevateZoom Demo | Download Elevate Zoom 提供了两种图像缩放模式,一个低分辨率的可见光图像和一个高分辨率缩放的图像。且它支持缩略图导航,同时支持鼠标悬停时放大图像。 magnificent.js Demo | Download magnificent.js 是一个简单的响应式插件,能够提供两种缩放模式: 模式 1: 内部缩放。 悬停时在图像内部显示放大后的图像。 模式 2: 外部缩放。显示放大镜玻璃效果,以展示图像的特定部分。 也支持鼠标滚动来缩放图片。   zoom.js Demo | Download zoom.js […]

龙生   12 May 2015
View Details
1 35 36 37 60