移动开发-响应式布局-rem单位 flexible 方案

什么是响应式布局

一个网站能够兼容多个终端
响应布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

@media媒体查询

特点：

使用 @media 查询，可以对不同的媒体类型定义不同的样式。

使用：

• @media 媒体类型 and (媒体特性) { css code}
• < link media=“媒体类型 and (媒体特性)” href=‘外部css文件路径’>
  简写： media="(媒体特性)"

媒体类型	描述
aural	用于语音和音乐合成器
braille	用于触觉反馈设备
handheld	用于小型或手持设备
print	用于打印机
projection	用于投影图像，如幻灯片
screen	所有浏览器 用于计算机显示器
tty	用于使用固定间距字符格的设备。如电传打字机和终端
tv	用于电视类设备
embossed	用于凸点字符（盲文）印刷设备
speech	用于语音类型
all	所有浏览器 用于所有媒体设备类型

Rem 介绍

• rem 是 font size of the root element（根元素的字体大小）
• rem （相对单位）是指相对于根元素的字体大小的单位。一旦根节点html定义的font-size变化，那么整个网页中运用到rem的也会随之变化。
• rem 取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度
• chrome浏览器字体小于12px（会被重置为12px)

Rem自适应原理

移动端自适应rem原理，可以根据屏幕的宽度来自适应宽高和字体大小，rem是根据根元素的大小而改变大小，所以只要把根元素的字体大小根据屏幕的宽度大小做出相应的改变就可以自适应屏幕了。

媒体查询改变根元素的字体大小（了解）

CSS3新增加了媒体查询功能，也就是可以根据设备媒体的属性做相关的判断，然后执行不同的CSS规则。 媒体查询细节参考。

媒体查询以@media开头，然后后面可以跟上 判断的条件，比如：screen表示屏幕设备, and是并且的意思， min-width是最小宽度的意思。

  @media screen and (min-width: 320px) {
   
   
        html {
   
   font-size: 50px;}
    }
     
    @media screen and