Day17 CSS Media Query

在了解Media Queries的用法之前，先来了解一些RWD的观念吧。

RWD是什麽?

RWD是Responsive Web Design的缩写，中文是翻译成响应式网站设计。
由於网路的普及，大家开始使用各种不同装置来上网浏览网页，RWD的概念也就应运而生。
RWD的概念是为了使网页在不同萤幕尺寸的装置下，都能呈现合适比例的画面。

RWD的环境建立

1. 在HTML的head部分必须设定 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport指的是目前眼睛所见的网页视窗
content="width=device-width, 是定义网页宽度等於装置的宽度，让网页能够因应不同装置来做出不同的调整
initial-scale=1.0 设定视窗是否需要放大或是缩小，设定1.0的话，就是大小不变

2. 使用CSS media Queries 语法
   Media Queries会侦测装置的尺寸和方向，并依照不同的装置给予适当版面设定。

RWD的原则

• 绝对不可以有x轴出现
• 能用flexbox，就不用media query
• 不能用media query，就用flexbox

RWD断点规划

PC - 1200px
iPad - 768px
iPad以下 - 767px
iPhone 6 Plus - 414px (视专案族群)
iPhone 6 - 375px (视专案族群)
iPhone 5、SE - 320px

Media Query是什麽?

Media query是由媒体类型(Media type)和媒体特性(Media feature)两个部分组成的。
Media query媒体查询会先查询媒体类型(Media type)是否和使用者使用的装置符合，若查询到是符合指定的媒体类型时，就会套用符合该媒体类型的媒体特性内所写的样式到使用者所使用的装置上，让网页能在不同萤幕大小时产生不同的版面配置。

CSS Media Query的语法

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

参考来源: CSS @media Rule

例如:

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

Media Type媒体类型有哪些?

1. all : 预设值，适用所有媒体类型装置
2. print : 适用印刷装置，包括预览列印产生的画面
3. screen : 适用於有萤幕的装置(例如: 电脑萤幕、平板、手机……)
4. speech : 适用於可以「读出」页面的装置。

Media Feature 媒体特性有哪些?

Media feature有很多个，我目前只有使用过和视窗/页面尺寸有关的特性，而且偶尔还会把这两个特性的概念搞混

• max-width 最大宽度，表示这个数字以下（包含） 的都适用。(<=)至多
• min-width 最小宽度，表示这个数字以上（包含） 的都适用。(>=)至少

参考资料:CSS Media Queries 详细介绍, Day22：小事之 Media Query,
min-width & max-width - 金鱼都能懂的CSS必学属性

以上为个人学习笔记整理
若有错误，欢迎指正