响应式媒体查询

1.互联网公司的产品在PC端和在移动端一般都会有不同的样式，如何实现的？

• 方案1，直接使用现成的bootstrap框架，自动的实现响应式页面，缺点无法满足自己的个性化需求和细节
• 方案2， 为PC端和移动端单独写页面和样式，可以实现个性化需求，但是工作量增多，维护难度大
• 方案3 ，使用模板系统，为PC和移动端单独写一个前端的页面模板，维护难度和代码量多少于方案2
• 方案4，自己使用@midia实现一个轻量级和个性化的CSS框架，优势灵活性强，可复用性高，缺点自己写框架代码量大，费时长，可能与原有项目重复，造成浪费

2.什么是媒体查询？写出语法和基本使用范例？

• @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

• 浏览器支持，>=IE9，>=chrome 21,>=firfox 3.5 , >= safari 4.0,>=Opora9

• css 语法

  @media *mediatype *and|not|only* (media feature)* {*    CSS-Code;*}
  <link rel="stylesheet" media="*mediatype* and|not|only (*media feature*)" href="*mystylesheet.css*">
  

• 媒体的类型 mediatype
  1.all 用于所有设备
  2.print 用于打印
  3.screen 用于PC,Pad,Phone
  4.speech 用于屏幕阅读器等发声装备

• 常用的media features
  1.width浏览器宽度
  2.height浏览器高度
  3.device-width设备屏幕分辨率的宽度值
  4.device-height设备屏幕分辨率的高度值
  5.orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait(竖向)，否则为landscape（横向）
  6.aspect-ratio：比例值，浏览器的纵横比
  7.device-aspect-ratio：比例值，设备屏幕的纵横比

• 代码实例