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：比例值，设备屏幕的纵横比
