製作響應式 CSS 樣式時，請確保它們只應用於目標裝置至關重要。如果您的目標是行動設備，但難以阻止它們幹擾桌面演示，請考慮以下方法。
不要使用單一媒體查詢斷點，而是使用一系列斷點。這允許您指定應套用行動樣式的特定寬度範圍，同時排除其他裝置。
以下是針對寬度在480 像素到1024 像素之間的裝置的媒體查詢範圍範例：
<code class="css">@media all and (min-width: 480px) and (max-width: 1024px) {
/* Mobile styles go here */
}</code>要涵蓋最常見的設備尺寸，請考慮以下範圍：
<code class="css">@media all and (min-width: 0px) and (max-width: 320px) @media all and (min-width: 321px) and (max-width: 480px) @media all and (min-width: 569px) and (max-width: 768px) @media all and (min-width: 769px) and (max-width: 800px) @media all and (min-width: 801px) and (max-width: 959px) @media all and (min-width: 960px) and (max-width: 1024px)</code>
確保無論設備的分辨率如何，您的樣式都可以很好地縮放，請避免使用px 單位。相反，選擇 EM 或 % 單位。 EM 單位相對於父元素的字體大小，而 % 單位相對於元素的總寬度。
這是使用媒體的程式碼的更新版本查詢範圍方法和EM 單位：
<code class="css">/* Regular desktop styles */
/* Mobile only styles for devices between 480px and 1024px */
@media all and (min-width: 480px) and (max-width: 1024px) {
/* Mobile styles using EM units */
}</code>此程式碼確保移動樣式專門套用於指定寬度範圍內的設備，同時保留與桌面樣式的分離。
以上是如何將響應式 CSS 樣式專門應用於行動裝置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
