RWD|基本環境介紹

第 11 屆 iThome 鐵人賽

DAY 22

自我挑戰組

網頁排版個人學習筆記系列第 22 篇

11th鐵人賽

echocarrie

2019-09-23 13:18:33

1645 瀏覽

分享至

RWD基本環境建立 | HTML

viewport可以解決瀏覽器的問題:可把螢幕寬度都轉成裝置的寬度，就不會有內容不同步的問題
瀏覽器顯示寬度=裝置寬度　width=device-width
縮放比例為1　initial-scale=1
emmet快捷鍵 meta:vp

<html lang="zh-tw">
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>
    </body>
</html>

viewport其他屬性
- device-width 畫面寬度
- device-height 畫面高度
- initial-scale 初始縮放比
- minimenu-scale 最小可縮放比
- maxmenu-scale 最大可縮放比
  - 如果maxmenu-scale=2 表示使用這最多就只能縮放兩倍大
- user-scalable 使用者是否可縮放
  - user-scalable=no 不讓使用者做縮放動作

▲備註:上述的縮放指 → mobile上使用者用手指縮放畫面的比例

RWD基本環境建立 | CSS 3 Media Query

CSS部分可先從PC往下寫到Mobile
- css中下方的語法權限比上面的大
css螢幕解析度的設定，會因設備的翻轉而有所更動
- such as 手機直式為375px title為綠色，翻轉變橫式>375px，title就會變紅色

.title{
    color: #000;
}
@media(max-width:768px) { /*螢幕於768px以下*/
    .title{
        color: red;
    }
    .content{
        color: #e59572;
    }
}
@media(max-width:375px) { /*螢幕於375px以下*/
    .title{
        color: green;
    }
    .content{
        color: #334252;
    }
}

從小解析度寫到桌機
- 使用min-width時就變成，於375px以上title綠色

@media(min-width:375px) { /*螢幕於375px以上*/
    .title{
        color: green;
    }
    .content{
        color: #334252;
    }
}
@media(min-width:768px) { /*螢幕於768px以上*/
    .title{
        color: red;
    }
    .content{
        color: #e59572;
    }
}
.title{
    color: #000;
}