目录
- 简介
- 语法
- 常用尺寸
一 简介
针对现在纷杂的设备,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就行了。
四 典型实例
五 好的网站收藏
注意:
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 即把浏览器宽度设置成屏幕宽度。