HTML5 CSS3 响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

 

优点： 

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

 

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

 

响应式不同设备平台 之间设计的顺序

Pc 1920*1080  笔记本1366*768  平板1024*768  手机 320*480

 

不同设备设计顺序优先级

1. 用户群占主导，客户使用设备占有比大的人群优先

2. 客户使用设备占比平均从大屏做到小屏做减法，比做加法容易一些。

 

 

在不改变内容的情况下，改变页面的布局以精确适应不同的设备，以此加强体验。

 

<meta name="viewport" content="width=device-width, initial-scale=1">

网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

 

 

min-width 最小宽度

min-width:1000px  表示大于1000px宽度

 

max-width

max-width:500px   表示小于500px宽度

媒介查询的使用方法

一、引用不同的样式表

<link rel=”stylesheet”  type="text/css"  media=”screen and(判断条件)” herf=”样式表文件” />

 

media属性

媒体类型：

 all 所有设备（默认为all）

 screen 电脑显示器

 handheld便携设备

 tv电视类型设备

 print打印用纸打印预览视图

 

判断条件

例如: min-width:1000px   

media=” (判断条件)”      media=”(min-width:1000px)”

通过设定屏幕的判断条件，调用对应的css文件。该实例多用于整页面不同风格的css调用与选取，使用该方法可能需要为一个页面制作多份个css文件。

<link type="text/css" rel="stylesheet" media="(min-width:760px)" href="css/blue.css">

<link type="text/css" rel="stylesheet" media="(max-width:760px) and (min-width:640px)" href="css/green.css">

<link type="text/css" rel="stylesheet" media="(max-width:640px)" href="css/red.css">

 

二、执行不同的css样式属性

@media (min-width:1000px){

大于1000px时的样式

}

@media (max-width:1000px) and (min-width:500px){

500-1000分辨率时的样式

}

@media (max-width:1000px){

小于500px时的样式

}