CSS自動適配高度和寬度是一種重要的技術，可以幫助我們在不同大小屏幕上展示相同的頁面效果。下面將介紹一些常用的CSS代碼技巧。

/*設置元素的寬度*/
.element{
width:100%;
max-width:500px;
min-width:200px;
}
/*充滿整個高度*/
html,body{
height:100%;
margin:0;
padding:0;
}
/*設置絕對定位元素的高度*/
.absolute{
position:absolute;
top:0;
bottom:0;
height:100%;
}
/*保留寬高比*/
.responsive-img{
max-width:100%;
height:auto;
}
/*響應式斷點*/
@media(max-width:768px){
.element{
width:50%;
}
}

以上代碼中，我們可以看到通過設置寬度的最大和最小值，來達到自適應寬度的效果，同時通過設置絕對定位元素的高度，讓其可以自適應高度。還有保留寬高比的技巧，可以保持圖片在不同大小屏幕上的比例不變。

最后，我們還可以使用響應式斷點，來在不同的屏幕尺寸下，使用不同的CSS樣式，以達到更好的自適應效果。