响应式一些知识

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                    横屏

转载于:https://www.cnblogs.com/geek12/p/4515980.html