如今，隨著移動設備的普及，越來越多的網站需要能夠同時在PC端和移動端展示良好的效果。為了實現這個目標，我們需要在實現網站的時候同時考慮PC端和移動端的CSS樣式。

在實現PC端和移動端CSS時，我們需要用到媒體查詢（Media Queries）來實現不同設備的布局和樣式。

當我們使用媒體查詢時，我們需要用到CSS的@media規(guī)則。在這里，我們可以針對不同的設備類型，如手機、平板電腦、筆記本電腦、臺式電腦等，設置不同的CSS樣式。

/* 針對手機設備的CSS樣式 */
@media only screen and (max-width: 480px){
/* CSS 樣式 */
body{
font-size: 16px;
}
}
/* 針對平板電腦設備的CSS樣式 */
@media only screen and (min-width: 481px) and (max-width: 1024px){
/* CSS 樣式 */
body{
font-size: 20px;
}
}
/* 針對電腦設備的CSS樣式 */
@media only screen and (min-width: 1025px){
/* CSS 樣式 */
body{
font-size: 24px;
}
}

在上面的代碼中，我們使用了@media規(guī)則，并在其中定義了3個不同的設備類型的CSS樣式。如果設備的屏幕寬度小于或等于480px，則會應用第一個CSS樣式。如果設備的屏幕寬度是在481px到1024px之間，則會應用第二個CSS樣式。如果設備的屏幕寬度是大于1024px，則會應用第三個CSS樣式。

通過使用@media規(guī)則，我們可以輕松地為不同的設備類型設置不同的CSS樣式，從而實現在PC端和移動端都能夠良好展示的效果。