在開發響應式網頁時，我們經常會遇到一個問題：在手機端屏幕尺寸下，網頁的樣式發生了變化，導致排版混亂。

這是因為在不同的屏幕尺寸下，元素的大小和位置會有所變化。因此，我們需要使用 CSS 來實現屏幕兼容。

下面是一些常見的 CSS 屬性和技巧，來確保你的網頁在手機端屏幕下表現良好：

/*設置 viewport*//*使用相對單位*/
body{
font-size:16px;
}
h1{
font-size:2em;
}
/*使用 @media 查詢*/
@media only screen and (max-width: 600px) {
/*當屏幕寬度小于 600 像素時，改變元素樣式*/
body {
background-color: lightblue;
}
}
/*使用 flexbox 布局*/
.container{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
/*壓縮圖片*/
img{
max-width:100%;
height:auto;
}

通過使用相對單位、@media 查詢、flexbox 布局和壓縮圖片等技巧，我們可以更好地控制網頁在手機端屏幕下的顯示效果，提高用戶體驗。