先上html代码<!DOCTYPEHTML>
<html>
<head>
<linkhref="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"rel="stylesheet">
<linkrel="stylesheet"type="text/css"media="screen"
href="http://tarruda.gi..
分类：
Web程序 时间：
2014-11-25 18:52:43
阅读次数：
202
屏幕尺寸大于400px时使用该css 屏幕尺寸小于399px时使用该cssbody{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/@mediascreen and (max-width:500px){body{background:.....
分类：
Web程序 时间：
2014-11-25 18:14:28
阅读次数：
152
css2的@media
css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS。
语法： @media sMedia { sRules }
说明：
sMedia : 指定设备名称。请参阅附录：设备类型
sRules : 样式表定义
指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。
示例：...
分类：
Web程序 时间：
2014-08-30 10:00:49
阅读次数：
277
使用HTML5开发移动应用时需要适配各种Android平板设备的分辨率和屏幕密度，过程实在很麻烦，最后的解决办法是使用css media query，同时匹配分辨率和屏幕密度，在每个设备上进行兼容性测试，最终保证在多数Android平板上都能较好的显示。
一个典型的针对设备的Css Media Query写法如下，可以保证页面高度充满屏幕，简单的设置height：100%...
分类：
移动开发 时间：
2014-07-26 15:11:30
阅读次数：
298
@media是css3中新定义的，功能非常强大，顾名思义PC是无法匹配横竖屏的，所以orientation只对移动设备起效。1.头部声明复制代码代码如下:加到复制代码代码如下:2. media匹配屏幕是横屏还是竖屏复制代码代码如下:@media all and (orientation : land...
分类：
移动开发 时间：
2014-07-15 09:58:48
阅读次数：
233
文章表达的中心思想就是最后的那句引用"最好的设计是尽量少的设计"。最重要的是我意识到平时我们都忽略了一个常识：一张未经加工的原始HTML文档就已经是响应式的了，根本不用什么CSS media属性或者指定任何样式。
通过查看HTML代码发现作者果然留下了一些信息，于是在twitter上找到他表达了我对他的膜拜之情以及想把如此精华的文章翻译成中文的意愿。作者很爽快地答应了23333~~(X___...
分类：
Web程序 时间：
2014-06-30 07:15:19
阅读次数：
350
现在试图解决android平板的屏幕分辨率问题，目前主要想到的办法是采用响应式设计和媒体查询，发现无论使用那种方式，工作量都很大，调试都困难，悲催啊。
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大，但是自从苹果和安卓的风靡之后，移动平台上的web开发变得越来越流行了，同时CSS的媒体查询可谓派上了大用场了。
以下为翻译内容，原文来自这里 非常棒的一篇文章
...
分类：
移动开发 时间：
2014-06-25 07:16:12
阅读次数：
278
1、什么叫响应式网页设计响应式Web设计(Responsive Web
design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS
media query的使用等。无论用户正...
分类：
移动开发 时间：
2014-05-13 18:46:35
阅读次数：
482
