应用CSS3 Media Queries 使网站移动化单列排版

　　说起 CSS3 的新特性，就不得不提到 Media Queries 。

　　本文比较详细，所以很多实际中用不到。所以如果只是想简单了解 Media Queries，推荐参考 CSS3 Media Queries 。

　　CSS2.1 定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。

　　而 Media Queries 的引入，其作用就是允许添加表达式用以确定媒体的情况，以此来应用不同的样式表单。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备，以此加强体验。所以 Media Queries 和 CSS 优化没有关系，甚至是矛盾的。

　　引用 CSS3 Media Queries 里的直观的 DEMO，当浏览器宽度改变时，应用的 CSS 发生变化。而这些，原本需要 JavaScript 的控制才能做到。

　　Web 移动化的趋势越加明显。虽然国内受到很多制约，但是这种浪潮却无法阻挡。前段时间 jQuery 宣布 mobile 项目，也加速了这种变化。 Media Queries 不久的将来应该就会被更多的使用，以更好的支持新兴设备比如 iPad。事实上，jQuery 甚至有 Media Queries的插件。

看看 Media Queries 做了什么

　　一个三栏布局，在屏幕变窄的情况下，变成1栏布局，甚至是消除多余两栏而只留下通常的内容的第2栏。Media Queries 是如何工作的？先看看 link 标签的写法：

在 media 属性里：

‧screen 是媒体类型里的一种，CSS2.1 定义了10种媒体类型
‧and 被称为关键词，其他关键词还包括 not(排除某种设备)，only (限定某种设备)
‧(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看相关的 Media features 部分

　　媒体特性共13种，可以说是一个类似 CSS 属性的集合。但和 CSS 属性不同的是，媒体特性只接受单个的逻辑表达式作为其值，或者没有值。并且其中的大部分接受 min/max 的前缀，用来表示大于等于/小于等于的逻辑，以此避免使用 < 和 > 这些字符。

那么，回到刚才的那条 Media Query，media="screen and (min-width: 400px)" 的意思就是当屏幕的宽度大于等于 400px 的时候，应用此条 CSS。

　　一个 Media Query 包含一种媒体类型，如果媒体类型没有指定，那么就是默认类型 all，比如：

　　一个 Media Query 包含0到多个表达式，表达式又包含0到多个关键词，以及一种媒体特性，比如：

逗号(,)被用来表示并列，表示或者。比如下面的例子表示此 CSS 被应用于宽度小于20em的手持，或者宽度小于30em的屏幕：

　　not 关键词用来排除符合表达式的设备，比如：

　　再看些其他例子(不准确，只是用来说明)：

　　上面将设备分成3种，分别是宽度大于800px时，应用 styleA，宽度在600px到800px之间时应用 styleB，以及宽度小于600px时应用 styleC。这其实是一个 CSS 覆盖的问题，所以当宽度正好等于800px时该应用那个样式？答案是 styleB，因为前两条表达式都成立，后者覆盖了前者。

　　所以说上面的例子虽然能工作，但是不准确。这个例子正常情况应该这样写：

　　并非所有的浏览器都支持 Media Queries，那么这些浏览器怎么看待 Media Queries？

　　Media Queries 是 CSS3 对于 Media Type 的一个扩展，所以不支持 Media Queries 的浏览器，应该仍然要识别 Media Type，但是 IE 只是简单的忽略了样式。only 关键词可能显得有些多余，对支持 Media Queries 的浏览器来说确实是这样，因为加不加 only 没有影响。only 的作用，很多时候是用来对那些不支持 Media Queries 但是却读取 Media Type 的设备隐藏样式表单的。比如：

‧支持 Media Queries 的设备，正确应用样式，就仿佛 only 不存在
‧不支持 Media Queries 但正确读取 Media Type 的设备，由于先读取到 only 而不是 screen，将忽略这个样式
‧不支持 Media Queries 的 IE 不论是否有 only，都忽略样式

　　最后再来看看 Media Queries 的支持情况。不出意外的，IE 6 7 8 全部出局，但是 IE9 幸免。根据 IE Blog 上的这篇 HTML5 and Same Markup 来看，IE9 支持 Media Queries。至于其他浏览器，同样不出意外的，全部支持 Media Queries。

via: http://waterlily-lsl.com/modules/article/view.article.php/c2/236/p1

标签 : html

发表评论

IT瘾于2012年1月5日下午02时19分48秒发布 #

如何刷新Android的ListView的UI界面

一般地，正确的自动更新UI界面的方式是通过自动更新Cursor，而实现自动更新Cursor，则是在创建Cursor和和被请求处理之前先调用 Cursor#setNotificationUri，然后在更新Cursor的Uri namespace变化的时候调用ContentResolver#notifyChange。这样就实现了自动更新UI界面，而这些全部都可以在ContentProvider完成。

For example, suppose you were creating a simple mail application and you wanted to update when new mail arrived but also provide various views on the mail. I'd have some basic Uri's defined.

content://org.example/all_mail

content://org.example/labels

content://org.example/messages

Now, say I wanted to get a cursor that gave me all mail and be updated when new mail arrives:

Cursor c;

//code to get data

c.setNotificationUri(getContentResolver(), Uri.parse("content://org.example/all_mail");

Now new mail arrives so I notify:

//Do stuff to store in database

getContentResolver().notifyChange(Uri.parse("content://org.example/all_mail", null);

I should also notify all the Cursors that selected for labels this new message met

for(String label : message.getLabels() {

getContentResolver().notifyChange(Uri.parse("content://org.example/lables/" + label, null);

}

And also, maybe a cursor is viewing that one specific message so notify them as well:

getContentResolver().notifyChange(Uri.parse("content://org.example/messages/" + message.getMessageId(), null);

The getContentResolver() calls happen where the data is accessed. So if it's in a Service or ContentProvider that is where you setNotificationUri and notifyChange. You should not be doing that from where the data is accessed, e.g., an Activity.

AlarmProvider.java

标签 : android, other

发表评论

IT瘾于2012年1月2日下午08时57分32秒发布 #

如何用jQuery做浏览器类型判断和分辨率判断

如何用jQuery做浏览器类型判断和分辨率判断，直接贴代码：

var bHeight=$(window).height()-$('.ui-layout-south').height()-$('.ui-layout-north').height();

$("#page").css({height:bHeight+'px'});

$(function() {

if($.browser.msie) {

}

else if($.browser.safari) {//contains chrome

}

else if($.browser.mozilla) {

}

else if($.browser.opera) {

}

else {

//alert("i don't konw!");

}

});

</SCRIPT>

$(document).ready(function()

{

//alert($(window).height()); //浏览器当前窗口可视区域高度

//alert($(document).height()); //浏览器当前窗口文档的高度

//alert($(document.body).height());//浏览器当前窗口文档body的高度

//alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin

//alert($(window).width()); //浏览器当前窗口可视区域宽度

//alert($(document).width());//浏览器当前窗口文档对象宽度

//alert($(document.body).width());//浏览器当前窗口文档body的高度

//alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin

alert(screen.height);//显示器分辨率，只能用JavaScript代码获取

alert(screen.width);

})

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

function getInfo()
{
    var s = "";
    s += " 网页可见区域宽："+ document.body.clientWidth;
    s += " 网页可见区域高："+ document.body.clientHeight;
    s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
    s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
    s += " 网页正文全文宽："+ document.body.scrollWidth;
    s += " 网页正文全文高："+ document.body.scrollHeight;
    s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
    s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
    s += " 网页被卷去的左："+ document.body.scrollLeft;
    s += " 网页正文部分上："+ window.screenTop;
    s += " 网页正文部分左："+ window.screenLeft;
    s += " 屏幕分辨率的高："+ window.screen.height;
    s += " 屏幕分辨率的宽："+ window.screen.width;
    s += " 屏幕可用工作区高度："+ window.screen.availHeight;
    s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
    s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
    s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
    //alert (s);
}

</script>

标签 : javascript, jquery, other

发表评论

IT瘾于2011年12月27日下午05时17分27秒发布 #