query media是css3中的模块,对于移动端的开发是非常重要的,是响应式web设计的中不可或缺的一部分.简单点说就是根据不同移动设备的屏幕参数来制定不同的css方案以实现web的响应式开发.目前Media Query在浏览器上的兼容度要高很多,Firefox,Safari,Chrome,Opera,iOS Safari,IE等主流浏览器都能很好的支持Media Query.CSS3 Media Query模块是目前在特定移动设备上开发Web应用样式所必需的技术. 先列举下常见的引入方式:…

移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixels在手机屏幕上占多大的位置,这…

1. format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta name="format-detection" content="telephone=no" meta name="format-detection" content="email=no" meta name="for…

随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5 viewport的使用能帮你做到这一点…… viewport 语法介绍: 01 <!-- html document --> 02 <meta name="viewport" 03     …

以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" /> <link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" /> 现今移动设备越来越多,苹果为iOS设备配备了a…

看了之后收获很大,分享一下: 本文将围绕我半年来在移动前端工程化做的一些工作做的总结,主要从localstorage缓存和版本号管理,模块化,静态资源渲染方式三个方面总结手机百度前端一年内沉淀的解决方案,希望对大家移动开发有所帮助. 一年前存在的问题 可能因为之前项目节奏紧,人力不足原因,一部分phper承担了前端的工作,于是暴漏了一些问题. 粗暴的一刀切 从第一次在厂子写代码开始,就被前辈告诉移动页面,所以的静态资源都要内嵌,即写在script和style内,这样的好处是,网络情况不好的时候,…

以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" /> <link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" /> 现今移动设备越来越多,苹果为iOS设备配备了a…

viewport: 你可以定义viewport的宽度.如果你不使用width=device-width,在移动端上你的页面延伸会超过视窗布局的宽度(width=980px),如果你使用了width=device-width,你的页面将会显示为合适的移动端宽度(width=320px),我们可以使用meta标记: <meta name="viewport" content="width=device-width"> viewport - target-de…

media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式.   media type种类:   用法: <link href="style.css" media="screen print" ... @media screen{ selector{rules} } 例子: <style type="text/css"> @media screen{ body{ background…

ECharts.js 移动端显示 现在很多时候,我们是在用手机.pad等一些移动端设备来进行办公获取数据.所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡和重叠的情况.这个时候就需要对移动端的图标显示做一些优化,ECharts对于移动端的优化和支持主要有2个方面. 一.ECharts组件的定位和布局 组件的定位官方描写的比较详细也比较全,我的简单理解为,ECharts.js对于图表里面每个组件和工具都采用了两种尺寸单位和设置固定位置. 一种是比较直接…