CSS3 media queries

ld_flex

于 2012-03-08 17:03:38 发布

阅读量427

点赞数

分类专栏： css3 文章标签： css header website layout url

css3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用CSS3媒体查询创建可适应不同屏幕尺寸的网站布局，包括针对不同宽度设置的样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更详细的信息请阅读: Create an adaptable website layout with CSS3 media queries

@media screen and (min-width:1200px){
	#container{
		width:1100px;
	}  

	header h1#logo a{
		width:1100px;
		height:150px;
		background:url(image.jpg) no-repeat 0 0;
	}                          

}

@media screen and (max-width:767px){
	#container{
		width:320px;
	} 

	header h1#logo a{
		width:320px;
		height:44px;
		background:url(image-small.jpg) no-repeat 0 0;
	}                           

}

@media screen and (min-width:1200px){
	img {
		max-width:1000px;
	}
}

@media screen and (max-width:767px){
	img {
    	max-width:305px;
	}
}