[Hbase] #yyds干货盘点#简单聊聊移动web开发之rem布局

@media  媒体查询关键字
设备关键词
  screen  彩色屏幕 *
  print   打印设备，可以针对打印机隐藏某些模块
  all     所有屏幕
条件关键词 - 条件两边必须有空格
  and     而且

/* 根html 为 12px */
html {
   font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */     
div {
  font-size: 2rem;
}

• 使用 @media查询，可以针对不同的媒体类型定义不同的样式；
  
• @media 可以针对不同的屏幕尺寸设置不同的样式；
  
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 ；
  
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询；
  

• 用 @media开头 注意@符号；
  
• mediatype  媒体类型；
  
• 关键字 and  not  only；
  
• media feature 媒体特性必须有小括号包含；
  

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

• mediatype 查询类型
  

• 关键字
  

• and：可以将多个媒体特性连接到一起，相当于“且”的意思；
  
• not：排除某个媒体类型，相当于“非”的意思，可以省略；
  
• only：指定某个特定的媒体类型，可以省略；
  

• 媒体特性
  每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
  注意他们要加小括号包含
  
• 媒体查询书写规则
  注意： 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁。
  

• flexible.js+rem