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