1，什么是媒体查询，媒体查询的优缺点
media queries 媒体查询
媒体查询表达式，指定媒体类型，根据媒体类型来选择相应的样式，在样式中，
选择一种页面的布局以精确地适应不同的设备
我们要做的就是针对不同的浏览器设备大小，编写不同的样式，让浏览器根据不同的窗口尺寸大小，选择不同的样式
IE8 以下不支持媒体查询
responsivator 工具
通过服务器判断，选择不同的页面，缺点页面风格修改复杂
2，
@media 设备类型 only() not() and (),设备二{}
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″ />
响应式网站设计需求
1，确定需要兼容的设备类型、屏幕尺寸
包括横向和竖向
2，制作线框原型
页面的布局如何变化，内容的删减啊，有没有特殊性的设计，需要前端和设计保持沟通
3，测试线框原型
可以帮助我们尽早发现可访问性
4，视觉设计
注意：保证内容文字的可读性、控件可点击区域面积等
5，前端实现
响应式页面的特殊性，最终的产出可能会和设计稿出入较大，需要前端开发人员和设计师沟通，所以最好，设计的时候就考虑这些情况
响应式web设计
1，响应式元素和媒介
height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。
2,媒体查询 orientation：portrait | landscape
portrait： 指定输出设备中的页面可见区域高度大于或等于宽度 竖屏（手机正常下）
landscape： 除portrait值情况外，都是landscape 横屏
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/16088.html