响应式
响应式布局概念
- 2010 年 5 月 由国外著名网页设计师 Ethan Marcotte 所提出
- 页面的设计与开发应当根据用户行为以及设备环境 ( 系统平台、屏幕尺寸、屏幕定向等 ) 进行相应的响应和调整。
技术要点
-
标签设置
-
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- 如果可能,调用 chome 内核,或者高版本的 IE 内核 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 兼容不支持 viewport 的设备(魅族) --> <meta name="HandheldFriendly" content="true">
-
-
使用媒体查询适配对应样式
-
根据目标用户的访问设备的主要类型做三种或四种布局,分别设置一套样式。
-
移动端优先: /* 超小型设备(手机,768px 以下)*/ @media screen and (min-width:768px) { ... } /* 小型设备(平板电脑,768px 以上) */ @media screen and (min-width:992px){ ... }/* 中型设备(台式电脑,992px 以上) */ @media screen and (min-width:1200px){ ... }/* 大型设备(大台式电脑,1200px 以上) */ 大屏优先: /* 大型设备(大台式电脑,1200px 以上) */ @media screen and (max-width:1200px) { ... } /* 中型设备(台式电脑,1200px 以下) */ @media screen and (max-width:992px){ ... }/* 小型设备(平板电脑,992px 以下) */ @media screen and (max-width:768px){ ... }/* 超小型设备(手机,768px 以下) */
-
-
百分比布局
-
宽度不固定,可以使用百分比,内外边距也可以使用百分比。
#head{width:100%;}
#content{width:50%;}
ul li{ width:16%;padding:1%; margin:0 1%;}
-
-
响应式图片
-
img{ width:100%; height:auto; display:block; }
-
-
横竖屏
-
/* 横屏: 设备屏幕的宽比高大 */ @media screen and (orientation: landscape) { .box { background-color: red; } } /* 竖屏:设备屏幕的宽比高小 */ @media screen and (orientation: portrait) { .box { background-color: blue; } }
-