响应式布局是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时的样式
}