在現(xiàn)如今移動(dòng)互聯(lián)網(wǎng)普及的時(shí)代，絕大多數(shù)的網(wǎng)站都需要適應(yīng)手機(jī)端瀏覽。而在網(wǎng)站布局方面，CSS樣式就成為了最基礎(chǔ)的一部分。因此，如何讓CSS樣式兼容適應(yīng)移動(dòng)端，就成為了非常重要的問題。

CSS樣式兼容移動(dòng)端的方法很多，這里我們介紹幾種常見的方法。

/* 設(shè)置meta標(biāo)簽，告訴瀏覽器以何種方式渲染頁面 *//* CSS媒體查詢，允許根據(jù)不同的設(shè)備采用不同的CSS樣式 */
@media only screen and (max-width: 767px){
/* 這里的CSS樣式只會(huì)在屏幕寬度小于767px的情況下生效 */
}
/* 使用rem來實(shí)現(xiàn)適配
rem是相對(duì)于根元素的字體大小進(jìn)行計(jì)算的，因此只需要設(shè)置好根元素的字體大小即可實(shí)現(xiàn)適配。
*/
html{
font-size: calc(100vw / 3.75);
}
/* 使用flex布局，適配不同的屏幕 */
.parent{
display: flex;
flex-direction: column;
align-items: center;
}
.child{
flex: 1;
}
/* CSS伸縮盒，自適應(yīng)布局
使用伸縮盒模型，可以方便地自適應(yīng)布局
*/
flex-box{
display: -webkit-flexbox;
display: -ms-flexbox;
display: flexbox;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
}

以上幾種方法都可以幫助CSS樣式更好地適應(yīng)移動(dòng)端，但是不同的方法適用情況也不同。開發(fā)者需要按照具體情況進(jìn)行選擇，以達(dá)到最好的效果。