响应式布局

@media: 声明关键字
screen：设备的类型
and : 关键字 (连接，指定)
() : 媒体特性(就是屏幕尺寸)
{} ： 指定的样式
当 screen的屏幕尺寸 符合 指定的尺寸时， 执行指定的样式
max-width: 屏幕小于等于指定尺寸时 触发 (最多)
min-width: 屏幕大于等于指定尺寸时 触发 (最少)

移动端开发的两种主流方案之一： 响应式布局兼容
1. 内容没有受到明显影响时，自适应宽高即可
2. 内容受到明显的影响时，改变布局，来保证内容的清晰
响应式布局:用于解决不同浏览器,不同分辨率以及不同设备的不同显示效果
优点:
1.面对不同分辨率的设备灵活性很强
2.能够快捷的解决多设备显示适应的问题
缺点:
1.兼容各种设备工作量大,效率低,页面加载时间长
2.一定程度上,会改变网站原有的布局结构,可能会出现用户混淆问题
主流方案之二: 单独制作移动端的页面