當我們設計網頁樣式時，除了設置顏色、字號等屬性，還需要考慮頁面元素在不同屏幕尺寸下的顯示效果。特別是在移動設備上，由于屏幕大小不一，我們需要保證頁面布局不失真，不變形。下面就來介紹一些css的技巧，幫助我們實現這個目標。

/* 禁止文字被拉伸 */
body {
text-size-adjust: 100%;
}
/* 設置圖片最大寬度，避免超出屏幕范圍 */
img {
max-width: 100%;
height: auto;
}
/* 使用flexbox布局，自適應屏幕尺寸 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 設置字體大小為vw單位，根據視窗寬度自適應調整 */
h1 {
font-size: 6vw;
}
/* 使用rem單位，實現字體大小和容器尺寸的相對調整 */
.main {
font-size: 1rem;
width: 40rem; /* 與字體大小保持一致 */
}
/* 設置元素寬高比，保證尺寸不失真 */
.box {
width: 50%;
height: 0;
padding-bottom: 50%; /* 1:1 的比例 */
}

上述代碼中，text-size-adjust屬性用于控制移動設備上的文字縮放比例，讓文字顯示正常；max-width屬性則用于設置圖片寬度的最大值，避免圖片超出屏幕范圍；flexbox布局則用于自適應屏幕尺寸；vw和rem單位則分別用于根據視窗寬度和字體大小自適應調整容器尺寸和字體大小；最后，width和height屬性以及padding屬性則可以幫助我們設置元素寬高比例，避免尺寸失真。

總之，css提供了多種方式幫助我們設置不變形的布局樣式，只要注意使用合適的屬性和單位，就可以讓頁面在不同設備上呈現出相同的效果。