S1-響應(yīng)式設(shè)計

  • 簡單定義

    • 一份代碼能夠適應(yīng)全部屏幕尺寸

  • 響應(yīng)式三要素

    • 第一，彈性布局；
    • 第二，彈性圖片；
    • 第三，media 查詢。
四種響應(yīng)模式

  • Column Drop 列下沉

    • 手機上每一個大塊單獨占據(jù)一行，隨著屏幕尺寸拉伸會在同一行上形成多個 column 列

  • Mostly Fulid

    • 基本上跟 Column Drop 一樣，但是有一點點“固定布局“的特點：當(dāng)?shù)竭_一定寬度后，主體內(nèi)容部分不再變寬，成為固定寬度。

  • Layout Shifter

    • 變換式，也就是不必遵循原有內(nèi)容順序，可以根據(jù)最佳展示需要來調(diào)整大塊順序。

  • Off Canvas

    • 抽屜式，屏幕不夠?qū)挼臅r候，隱藏，通過按鈕呼出。足夠?qū)挼钠聊簧希冀K顯示。
viewport設(shè)置
<meta name="viewport" content="width=device-width">
  • 但是更為常見的設(shè)置是：
<meta name="viewport" content="width=device-width, initial-scale=1">

很多知名的網(wǎng)站都是用了上面的設(shè)置，例如 http://alistapart.com/ ，

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容