2017年7月14日 星期五

RWD 回應式網頁設計常用斷點-網頁設計教學


RWD 斷點指的是裝置的螢幕解析呈現的區隔,也就是說手機直式螢幕寬如果為480像素,
那麼480就是斷點,平板直式螢幕寬為768像素,768就是斷點依此類推。
因為工作跟教學常需要這些尺寸,所以特別做個紀錄。
必須要先在<head>裡加上RWD很重要的meta設定
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

以下是需要加入到CSS樣式表中。
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}

沒有留言:

張貼留言