响应式网页设计

响应式设计

响应式设计的概念（三要素）

• 流体网格

• 响应式图片

• 媒体查询

        真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。
  

相关概念

• 分辨率 resolutio 指显示器所能显示的像素的多少

    实际分辨率是布局分辨率的两倍
  

• 像素密度 dpi/ppi 每平方英寸屏幕所拥有的像素数

•   像素密度越大，显示画面细节就越丰富。
    像素密度=√{（长度像素数^2+宽度像素数^2）}/ 屏幕尺寸、
    iphone3G   165dpi      320px * 480px
    iphone4    326 dpi     640px * 960px
    iphone6s   326dpi     1334px * 750px
  

• 设备像素比 dip/dpr

    像素比大于2即为视网膜屏幕
  

• 常见设备屏幕信息 https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

viewport

定义

• 可视区域
• 移动端： 布局视口(大部分980px)（手机页面一般不需要布局视口） /理想视口（视口宽度=设备宽度）

设置

去掉布局视口：
<meta name="viewport" content="width=device-width,initial-scale=1.0">

设置选项

• width 视口宽度 通常设置为 device-width
• height 视口高度
• initical-calse 初始化缩放比例
• maximun-scale 最大缩放比例
• minmun-scale 最小缩放比例
• user-scaleable: yes/no 是否允许用户缩放

媒体查询

媒体类型

• screen
• print
• .....

媒体特性

• width 视口宽度

• max-width 最大视口宽度 视口宽度<=某个值

• min-widht 最小视口宽度 视口宽度>=某个值

• height 视口高度

• max-height 最大视口高度

• min-height 最小视口高度

• device-width 设备宽度

• max-device-width 最大设备宽度

• min-device-width 最小设备宽度

• device-height 设备高度

• max-device-height 最大设备高度

• min-device-height 最小设备高度

• aspect-ratio 视口宽高比

• min-aspect-ratio

• max-aspect-ratio

• device-aspect-ratio 设备视口宽高比

• max-device-aspect-ratio

• min-device-aspect-ratio

• orientation 设备使用方向

  • landscape(水平)
  • portrait(垂直方向)

• resolution 屏幕像素比 单位 dppx

• max-resolution

• min-resolution

媒体查询 用法

	@media () {
	
	}
	例如：
		@media(max-800px){
		body{
			background:#369;
		}
		h1{
			color:green;
		}
	}

• and 并且
• , 或者
• only 与媒体类型配合使用
• not 与媒体类型配合使用

断点

• 断点看需求

• <= 480px 手机 小屏幕

• 480px 并且 <= 800px 平板 中等屏幕

• 800px <= 1400px PC 大屏幕

• = 1400px 超大屏幕

             @media(min-480px){
    	.container{
    		480px;
    	}
    }
    @media(min-768px){
    	.container{
    		750px;
    	}
    }
    @media(min-1200px){
    	.container{
    		1000px;
    	}
    }