Category Archives: Frontend

移动端尺寸基础知识

初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960, 640×1136, 750×1334, 1242×2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。 所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。 倍率与逻辑像素 再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。 在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。 在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。 由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。 Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。 如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率： ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] xxxhdpi [4倍] 各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据： 就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义： ldpi 如今已绝迹，不用考虑 mdpi [320×480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小） hdpi [480×800、480×854、540×960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位） xhdpi [720×1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位） xxhdpi [1080×1920]（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上） xxxhdpi [1440×2560]（极少数2K屏手机，比如Google Nexus 6） 自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。 不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480×800和1080×1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320×533和360×640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。 单位 不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。 单位之间的换算关系随倍率变化： 1倍：1pt=1dp=1px（mdpi、iPhone 3gs） 1.5倍：1pt=1dp=1.5px（hdpi） 2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6） 3倍：1pt=1dp=3px（xxhdpi、iPhone 6） 4倍：1pt=1dp=4px（xxxhdpi） 单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080×1920，有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。 无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。 Web怎么办 移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。 可以通过这个测试页面 http:/m/test.html 来看看你的移动设备屏幕宽度，这是逻辑像素宽度。 以iPhone 5s为例，屏幕的分辨率是640×1136，倍率是2。浏览器会认为屏幕的分辨率是320×568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。 实际应用 大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。 之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。 要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？ 首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。 再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。 现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。 下面来看看3个平台各自的画布设置： […]

关于适配你需要知道的—MobileWeb适配总结

开门见山，本篇将总结一下MobileWeb的适配方法，即我们常说的H5页面、手机页面、WAP页、webview页面等等。 本篇讨论的页面指专门针对手机设备设计的页面，并非兼容全设备的响应式布局。 文中提到的 device-width 指 viewport meta 标签中 width 的值，即由浏览器指定的值，常用机型对应值可参照Screen Sizes。 适配达到的效果是什么？ 在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。 适配应关注哪些要素？ 一般来说，我们需要关注的是：字体、高宽间距、图像（图标、图片）。 其中，图像相对要复杂一些，针对流量、清晰度等问题网上也有比较成熟的解决方案，比如：矢量化、字体化、image-set 等等，在此不做深入。在满足快速开发的需求下，我们使用较为偷懒的方式：利用 css 将图像限定在元素内（ img 图片使用 [max-]width: 100% ，背景图像使用 background-size ），布局只针对元素进行。 另外要考虑到，设计师设计视觉稿时使用什么样的宽度，才能既满足设计自身的需求又能让前端开发方便的切图适配。 举个例子 围绕这三要素，我们用一个小例子来说明接下来要介绍的三种方案的实现方式，按 640px 标准需实现的效果如图： app.jpg 固定高度，宽度自适应 这是目前最通用的一种做法，属于自适应布局，viewport width 设置为 device-width，以较小宽度（如 320px）的视觉稿作为参照进行布局。垂直方向的高度和间距使用定值，水平方向混合使用定值和百分比或者利用弹性布局，最终达到“当手机屏幕变化时，横向拉伸或者填充空白的效果”。图像元素根据容器情况，使用定值或者 background-size 缩放。 粗略浏览了下一些大厂的首页，像百度、腾讯、Facebook、Twitter 都是采用的这种方案。 要点： 以小宽度作为参照是因为如果布局满足了小宽度的摆放，当屏幕变宽时，简单的填充空白就可以了；而如果反过来就可能造成“挤坏了”，考虑 header 区域，左测 logo 右测横向 nav 的情况。 需要小宽度的布局，又需要大宽度的图像，这是一个矛盾点。 320px 过于窄小，不利于页面的设计；只能设计横向拉伸的元素布局，存在很多局限性。 兼容性较好。 实现比较简单，样式中的尺寸都按照视觉稿二分之一大小设置，查看效果和代码。 固定宽度，viewport 缩放 视觉稿、页面宽度、viewport width 使用统一宽度，利用浏览器自身缩放完成适配。页面样式（包括图像元素）完全按照视觉稿的尺寸，使用定值单位 （px、em）即可完成。 优点： 开发简单：缩放交给浏览器，完全按视觉稿切图。 还原精准：绝对等比例缩放，可以精准还原视觉稿（不考虑清晰度的情况下）。 测试方便：在PC端即可完成大部分测试，手机端只需酌情调整一些细节（比如图标、字体混合排列时，因为字体不同造成的对齐问题）。 存在的问题： 像素丢失：对于一些分辨率较低的手机，可能设备像素还未达到指定的 viewport 宽度，此时屏幕的渲染可能就不准确了。比较常见的是边框“消失”了，不过随着手机硬件的更新，这个问题会越来越少的。 缩放失效：某些安卓机不能正常的根据 meta 标签中 width 的值来缩放 viewport，需要配合 initial-scale 。 文本折行：存在于缩放失效的机型中，某些手机为了便于文本的阅读，在文本到达 viewport 边缘（非元素容器的边缘）时即进行折行，而当 viewport 宽度被修正后，浏览器并没有正确的重绘，所以就发现文本没有占满整行。一些常用的段落性文本标签会存在该问题。 缩放失效问题需通过 js 动态设定 initial-scale

文本折行问题可以通过 […]

关于CSS3的box-sizing

以前写padding都要从宽高里送去相应的值，今天看京东手机版网页，发现了box-sizing:border-box;，加上之后就不用再减去相应的值了，因为填充已经到边框里面了。 定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 默认值： content-box 继承性： no 版本： CSS3 JavaScript 语法： object.style.boxSizing="border-box"

修改placeholder的颜色

CHROME下去掉保存密码后输入框变成黄色背景样式

用阴影实现:

如果不想保存密码的话加个autocomplete="off"到form或者input就行了。 from:http://jinzhe.net/post/26.html

利用Data URL(data:image/jpg;base64,)将小图片生成数据流形式

先看一段代码：

那这些代码是如何生成的咧？ 先看下这些代码“data:image/jpg;base64,iVBORw0KGgoAAAANSUhE……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。 等同于：

显示结果： Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。 语法： data:image/jpg;    声明数据协议及类型名称 base64,               编码形式为base64 /9j/4AAQSkZ……    base64编码结果 最后附上Data URL的生成方法（PHP）：

注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担，总之有利有弊。 from:http://www.lvtao.net/dev/php-image-data-url.html

使用jquery获取父元素或父节点的方法

jquery获取父元素方法比较多，比如parent()，parents()，closest()这些都能帮你实现查找父元素或节点，下面我们来一一讲解： 先举个例子， 1.<ul class="parent1"> 2.<li><a href="#" id="item1">jquery获取父节点</a></li> 3.<li><a href="#">jquery获取父元素</a></li> 4.</ul>   我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素，有以下几种方法： 1、parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。 代码如下 1.$('#item1').parent().parent('.parent1'); 2、:parent 匹配含有子元素或者文本的元素 代码如下   1.$('li:parent');  3、parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。 代码如下  1.$('#items').parents('.parent1'); 4、closest([expr]) closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。 closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后 就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0 个，1个，或者多个元素。 closest对于处理事件委派非常有用。 1.$('#items1').closest('.parent1'); from:http://www.cnblogs.com/weixing/archive/2012/03/20/2407618.html

jQuery Ajax 简单的实现跨域请求

html 代码清单： <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax(     {         type:’get',         url : 'http://www.youxiaju.com/validate.php?loginuser=lee&loginpass=123456',         dataType : 'jsonp',         jsonp:"jsoncallback",         success  : function(data) {             alert("用户名："+ data.user +" 密码："+ data.pass);         },         error : function() {             alert('fail');         }     } ); }) </script> 服务端 validate.php 代码清单： <?php header('Content-Type:text/html;Charset=utf-8'); $arr = array(     "user" => $_GET['loginuser'],     "pass" => $_GET['loginpass'],     "name" => 'response' ); echo $_GET['jsoncallback'] . "(".json_encode($arr).")"; 效果图：   from:http://blog.csdn.net/liruxing1715/article/details/18707605

推荐 14 款基于 JavaScript 的数据可视化工具

俗话说，一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解，让信息发布者更加高效地展示自己的核心内容。在前端开发中，如果缺少合适 工具，制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热，有较多优秀的图表开源库和制作工具脱颖而出。下面，我们就拿其中比较有名的 14个产品进行简要介绍。 AnyChart 链接：http://www.anychart.com/ AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案，它可以轻松地跨浏览器、跨平台工作。除了基础的图表功能外，它还有收费的交互式图表和仪表功能。它可以通过 XML 格式获取数据，该方式让开发人员非常灵活地控制图表上的每一个数据点，而当图表数据点数量偏大时，则可以采用 CSV 数据输入，减小数据文件大小和图表加载时间。 amCharts 链接：http://www.oschina.net/p/amcharts amCharts 是一款高级图表库，致力于对 Web 上的数据可视化提供支持。它所支持的图表包括柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、燃烧图和金字塔图等等。amCharts 库是一款完全独立的类库，在应用中不依赖任何其他第三方类库，就可直接编译运行。除了提供最基本的规范要素外，amCharts 还提供了交互特性。用户在浏览基于 amCharts 制作的图表时，用鼠标 hover 图表内容，可以与其进行交互，使图表展示细节信息，其中呈现信息的容器被叫做 Balloon（气球）。除此之外图表可以动态动画的形式被绘制出来，带来了了非常好的展示效果。 Cesium 链接：http://www.oschina.net/p/cesiumjs Cesium 同样专注于地理数据可视化，它是一个 Javascript 库，可以在 Web 浏览器中绘制 3D/2D 地球。无需任何插件即可基于 WebGL 来进行硬件加速。除此之外，它还有跨平台、跨浏览器的特性。Cesium 本身基于 Apache 开源协议，支持商业及非商业项目。 Chart.js 链接：http://www.oschina.net/p/chartjs Chart.js 是一个简单、面向对象，为设计和开发者准备的图表绘制工具库。它提供了六种基础图表类型。基于 Html5，响应式，支持所有现代浏览器。同时它不依赖任何外部工具库，本身轻量级，且支持模块化，即开发者可以拆分 Chart.js 仅引入自己需要的部分进入工程。在小巧的身段中它同时支持可交互图表。 Chartist.js 链接：http://www.oschina.net/p/chartist-js Chartist.js 是一个非常简单而且实用的 JavaScript 图表生成工具，它支持 SVG 格式，图表数据转换灵活，同时也支持多种图表展现形式。在工程中，Chartist.js 的 CSS 和 JavaScript 分离，因此代码比较简洁，在应用时配置流程十分简单。它生成的是响应式图表，可以自动支持不同的浏览器尺寸和分辨率，更多的是，它也支持自定义 SASS 架构。 D3 链接：http://www.oschina.net/p/d3 2011年，Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 发布了 D3，它是目前 Web 端评价最高的 Javascript 可视化工具库。D3 能够向用户提供大量线性图和条形图之外的复杂图表样式，例如 Voronoi 图、树形图、圆形集群和单词云等等。它的优点是实例丰富，易于实现调试数据同时能够通过扩展实现任何想到的数据可视化效果，缺点是学习门槛比较高。与 jQuery 类似，D3 直接对 DOM 进行操作，这是它与其它可视化工具的主要区别所在：它会设置单独的对象以及功能集，并通过标准 API 进行 DOM […]

js操作select标签

html中的select标签 javascript对它们的操作 一、基础理解 复制代码代码如下: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option> //options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签 1:options[ ]数组的属性: length属性———长度属性 selectedIndex属性——--当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3…..)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值……….) 2:单个option的属性(—obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个—) text属性———返回/指定 文本 value属性——返回/指定 值，与<options value="…">一致。 index属性——-返回下标, selected 属性——-返回/指定该对象是否被选中.通过指定 true 或者 false，可以动态的改变选中项 defaultSelected 属性—--返回该对象默认是否被选中。true / false。 3:option的方法 增加一个<option>标签—--obj.options.add(new("文本","值"));<增> 删除一个<option>标签—--obj.options.remove(obj.selectedIndex)<删> 获得一个<option>标签的文本—--obj.options[obj.selectedIndex].text<查> 修改一个<option>标签的值—--obj.options[obj.selectedIndex]=new Option("新文本","新值")<改> 删除所有<option>标签—--obj.options.length = 0 获得一个<option>标签的值—--obj.options[obj.selectedIndex].value 注意: a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效. b:obj.option中的option不需要大写,new Option中的Option需要大写 二 、应用 复制代码代码如下: <html> <head> <script language="javascript"> function number(){ var obj = document.getElementById("mySelect"); //obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变 //obj.options.add(new Option("我的吃吃","4"));再添加一个option //alert(obj.selectedIndex);//显示序号，option自己设置的 //obj.options[obj.selectedIndex].text = "我的吃吃";更改值 //obj.remove(obj.selectedIndex);删除功能 } </script> </head> <body> <select id="mySelect"> <option>我的包包</option> <option>我的本本</option> <option>我的油油</option> <option>我的担子</option> </select> <input […]