响应式布局之媒体查询功能

标签：copy   tag   部分   通过   tle   简单   max   全屏   效果   

实现响应式布局有很多方法：

媒体查询功能：Media Queries就是其中之一

media用来指定特定的媒体类型，例如屏幕（screen）和打印（print）和支持所有媒体介质的all

如果要在head部分引用，形式如下：

当然还可以在<style></style>中引用：

通过一个简单的例子就明白了怎么媒体查询了：

例子很简单，max-width为品目显示最大宽度，因此：

当屏幕宽度大于800时，显示一个600*600的大红块

小于或等于800时，显示一个500*500的黄色div

同理，屏幕宽度小于等于500时，显示一个300*300的蓝色div

效果如图：

1.屏幕宽度为：1366px全屏状态

2.屏幕宽度为611px

3.屏幕宽度为440px

同理：也可以用min-width表示当屏幕宽度大于或等于xxxpx时的状态

或者采用screen and (min-width:600px) and (max-width:900px)结合多个媒体查询

响应式布局之媒体查询功能

标签：copy   tag   部分   通过   tle   简单   max   全屏   效果   

原文地址：http://www.cnblogs.com/mgqworks/p/7728073.html