【media-queries】媒体查询，为了响应式设计而生

目录

1. 简介
2. 语法
3. 常用尺寸

一 简介

针对现在纷杂的设备，css3中加入，可以查询你的浏览类型(screen彩色屏幕, print, all)和css属性判断。

最常用的就是查询屏幕大小，给予适合的展示效果，即流行的响应式设计(Responsive Design)。

 

二 语法

1 简单的例子

@media only screen and (max-width:320px) {
     .container {
       width:90%;
       padding:0 4%;
     }  
}        

前半部分是media-type查询，后面看做是css查询。

2 如果是要大于320小于480像素

@media only screen and (min-width:320px) and (max-width：480px) {
     .container {
        // style for  media(320px < width < 480px)
     }  
}

3 

 

三 常用尺寸

 iphone4 safari视窗高度(window.innerHeight) 356px;

iphone4 weixin视窗高度(打开网页时测算的window.innerHeight) 374px;

iphone5 相关尺寸都加88px就行了。

 

四 典型实例

 

五 好的网站收藏

http://2011.dconstruct.org/

 

注意：

1 max-width的宽，非屏幕的分辨率宽 

　　买手机的时候，1280*800的像素，跟这里的max-width的像素值不是对应的。 因为android系统会自动进行放大，相当于在屏幕上有一个放大层，一个显示像素点可以有多个像素点组成，所以有的达到1280*800(如魅族mx2)但是不能显示的像1280*800浏览器显示的那么大，但是字体什么的显示的更加清晰。

2 width跟device-width的区别

width称为视口宽度，device-width称为屏幕宽度.

meta的viewport中 width=device-width 即把浏览器宽度设置成屏幕宽度。