css不同像素适应窗口 |css 多行多余

在CSS中，常用到的像素值有px、em、rem等。其中px是一个固定像素，而em和rem相对来说更为灵活。那么如何使用不同像素值来适应窗口呢？

使用像素值时，大家可以使用媒体查询来适配不同的屏幕大小。例如：

@media screen and (max-width:768px) {  
.example {  
font-size:16px;  
}  
}  
@media screen and (min-width:769px) and (max-width: 1200px){  
.example {  
font-size:18px;  
}  
}  
@media screen and (min-width: 1201px){  
.example {  
font-size:20px;  
}  
}

上述代码表示，当屏幕宽度小于等于768px时，文字大小为16px；当屏幕宽度在769px~1200px之间时，文字大小为18px；当屏幕宽度大于等于1201px时，文字大小为20px。通过这种方式，大家可以让网页在不同的屏幕设备上展现更佳的效果。

当然，也可以使用相对大小如em或rem来使网页适应不同的窗口大小。例如：

.example {  
font-size:2rem;  
}

上述代码表示字体大小为根元素字体大小的2倍。由于根元素字体大小可以跟随窗口大小而变化，所以这种方案可以自适应不同的屏幕。

综上所述，使用不同像素适应窗口可以让网页在不同设备上有更好展现效果。大家可以使用媒体查询或相对大小等方式来实现这一目标。