前端自适应常适配的屏幕大小

/**
 * 媒体查询,参考部分Bootstrap框架
 */
/**当前页面大于1200px时,大屏幕,主要是PC端。**/
@media (min-width: 1200px) {
	
}
/**在992和1199像素之间的屏幕里,中等屏幕,分辨率低的PC**/
@media (min-width: 992px) and (max-width:1199px) {

}

/**在768和991像素之间的屏幕里,小屏幕,主要是PAD**/
@media (min-width:768px ) and (max-width:991px) {
	
	
}
/*在480和767像素之间的屏幕里,超小屏幕,主要是手机。 */
@media (min-width: 480px) and (max-width:767px) {
/*
 * 1、浏览器屏幕宽度大于等于480,小于768时,将header等的高度设置为45px;
 * 2、header中的logo隐藏;
 * 3、nav的宽度由55%改为100%,行高设置为45px;
 * */
#header,#header .head_bx,#header .link{
	height: 50px;
}
#header .logo,.xs_hidden{
	display: none;
}
#header .link{
	width: 100%;
	height: 50px;
}
#header .link li{
	line-height: 50px;
}
}
/**在小于480像素的屏幕、微小屏幕、更低分辨率的手机**/
@media (max-width:479px) {
	/**
	 * 1、浏览器屏幕小于480,将header等的高度设置为45px
	 * 
	 */
#header, #header .head_bx,#head .link{
	height: 45px;
}
#header .logo, .xs_hidden{
	display: none;
}
#header .link{
	width: 100%;
	line-height: 45px;
}
#header .link li{
	width: 25%;
}

}

你可能感兴趣的:(学习内容,前端)