CSS是一種常用的網頁樣式語言,它可以非常方便地實現移動端網頁的布局和樣式調整。以下是一些實現移動端網頁的常用CSS方法:
/* 禁止縮放 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 移動端布局-響應式 */ @media screen and (max-width: 640px) { /* 根據屏幕寬度設置元素寬度 */ body { width: 100%; } /* 隱藏或顯示某些元素 */ div#sidebar { display: none; } div#main { width: 100%; } } /* 移動端字體適配 */ html { font-size: 14px; } @media screen and (min-width: 320px) { html { font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (750 - 320))); } } @media screen and (min-width: 750px) { html { font-size: 16px; } } /* 移動端按鈕樣式 */ button, input[type="submit"] { padding: 0.2rem 0.5rem; font-size: 0.8rem; border: none; outline: none; background-color: #1296db; color: #fff; border-radius: 0.25rem; cursor: pointer; transition: background-color 0.3s ease; } button:active, input[type="submit"]:active { background-color: #0b8ec4; }
以上是CSS實現移動端網頁的常用方法,使用這些方法可以輕松地創建美觀、流暢的移動端網頁。