iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
1
自我挑戰組

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

RWD|基本環境介紹

  • 分享至 

  • xImage
  •  

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;
}
  • 網頁最小兼容解析度
    • 網頁設計師在設計網頁下,最小會兼容的螢幕解析度至少會做到320px

工具類

  • 模擬mobile介面工具:Chrom開發人員工具
    Chrom示意圖

  • 查看各種設備螢幕解析度尺寸:SCREEN SIZ.ES

    • 看device width
      SCREEN SIZ示意圖

上一篇
jQuery|第三方plugin技巧
下一篇
RWD|常見佈局設定+UI設計注意細節
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言