H5C3 05-媒体查询

 一. 媒体查询

媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很好的用户体验。

 2.语法规范

@media mediatype and|not|only (media feature){
      css-code;
}

• 用@media开通 注意@符号
• mediatype 媒体类型
• 关键字 and not only(  and：可以将多个媒体特性连接到一起，相当"且"于的意思   not：排除某个媒体类型，相当于"非"的意思，可以省略 only：指定某个特定的媒体类型，可省略)
• media feature 媒体特性，必须有小括号包含 

规范代码：

3. 响应式布局容器

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

• 超小屏幕（手机，小于 768px）：设置宽度为 100%

• 小屏幕（平板，大于等于 768px）：设置宽度为 750px

• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px

• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

示例如下

@media (max-width: 768px) {
  .box {
    background-color: red;
  }
}
@media (min-width: 768px) {
  .box {
    background-color: green;
  }
}
@media (min-width: 992px) {
  .box {
    background-color: blue;
  }
}
@media (min-width: 1200px) {
  .box {
    background-color: black;
  }
}

3.1 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
    .box {
        display:none;
    }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

3.2 最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
    .box{
        width: 980px;
    }
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

3.3 多个媒体特性使用

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {
      background-color:#f5f5f5;
    }
}

4.引入外部资源

二. 移动端常见布局

移动端单独制作

• 流式布局（百分比布局）

  • 流式布局，就是百分比布局，也称非固定像素布局。

  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

  • 流式布局方式是移动web开发使用的比较常见的布局方式。

• flex 弹性布局（强烈推荐）

• less+rem+媒体查询布局

• 混合布局

响应式

• 媒体查询

• bootstarp

2.1 布局视口、视觉视口、理想视口

     布局视口(layout viewport):在PC端开发的页面 切换到了移动设配上面 就会显示不全,此时布局视口要远大于 移动设配的宽度

     视觉视口(visual viewport):用户正在看到的网页的区域

     理想视口(ideal viewport):布局视口 等于 视觉视口，也就是(布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。)

2.2rem

rem单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

/* 根元素html为10px */
html {
   font-size: 10px;
}
/* .box的宽度大小为200px */       
.box {
    width: 20rem;
}

rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。