6月21日 响应式网页

响应式设计

自适应设备和屏幕,用户体验一样好

响应式网页构成

1. 流式页面布局
   垂直方向不设置固定布局

2. 可伸缩的图片和文字
   弹性盒子,rem,百分比宽度

3. 使用css3的Media Query技术

测试

1. 浏览器自带测试工具
2. 真实的屋里设备来测试

视口viewport

• 如果视口宽度大于设备宽会出现滑动条.

<meta name="viewport" content="vidth=device-width,initial-scale=1,user-scalable=0">

上述是移动端支持响应式设计的头代码

所有尺寸和文字大小不使用决定单位

百分比 rem(根级参考,也就是html)/em(父级参考)

使用浮动定位

图片百分比自适应

媒体查询media Query

- media: screen  print  
- Query(设备物理特性) width resolution-ratio
- 可以使用link标签的media属性设置媒体查询引用的cssp文件
- and跟前后括号必须有空格

bootstrap

bootsrap:css插件+自身js插件
1. 引入bootstrap,jQuery,等相关的插件,且先jquery后bootstrap,建议放在底部.

. ie兼容

1. X-UA-Compatible元标签ie特有的兼容性标签,其他浏览器会忽略
   

<meta http-equiv="X-UA-Compitable" content="IE-edge">//兼容老版本ie内核

1. html5shiv.js
2. respond.js

css hack
<--!if ie>
<--!end if>
eg:

bootstrap

是一个css库

• 版本2 pc优先响应式设计
• 版本3 移动优先响应式设计

#

lg >1200px
md 1200px > w > 992px
sm 992px > w >768px
xs < 768px

#

常用的集中样式后缀
danger warning success info primary