溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

bootstrap框架自適應(yīng)手機(jī)的方法

發(fā)布時(shí)間：2020-09-21 13:55:44 來源：億速云 閱讀：398 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了bootstrap框架自適應(yīng)手機(jī)的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

通過響應(yīng)式開發(fā)使得一個(gè)網(wǎng)站能夠兼容多種終端。

通過響應(yīng)式布局能使網(wǎng)站在電腦、平板和手機(jī)上有更好的閱覽體驗(yàn)，屏幕尺寸不一樣展示給用戶的網(wǎng)頁(yè)內(nèi)容也不一樣，我們利用媒體查詢可以檢測(cè)到屏幕的尺寸（主要檢測(cè)寬度），并設(shè)置不同的CSS樣式，就可以實(shí)現(xiàn)響應(yīng)式的布局。

響應(yīng)式開發(fā)的原理：媒體查詢

媒體查詢，查詢到當(dāng)前屏幕(媒介媒體)的寬度，針對(duì)不同的屏幕寬度設(shè)置不同的樣式來適應(yīng)不同屏幕。當(dāng)你重置瀏覽器大小的過程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。簡(jiǎn)單說，你可以設(shè)置 不同屏幕下面的不同的樣式，達(dá)到適配不同的屏幕的目的。

實(shí)現(xiàn)方式：通過查詢screen的寬度來指定某個(gè)寬度區(qū)間的網(wǎng)頁(yè)布局。

超小屏幕      （移動(dòng)設(shè)備）         w<768px

小屏設(shè)備    768px-992px          768 <= w <992

中等屏幕    992px-1200px     992 =< w <1200

寬屏設(shè)備    1200px以上      w>=1200

CSS 語(yǔ)法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享bootstrap框架自適應(yīng)手機(jī)的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手