设计响应式布局结构
不可以使用绝对宽度布局,也就是说Css代码不能指定像素宽度。
(错误)width:940px;
(正确)width:100%;或者width:auto;
(错误)网页字体使用绝对大小(px)
(正确))网页字体使用相对大小(em)
流体布局是响应式设计中的一个重要方面
流体布局要求页面中各个区块的位置是浮动的,不是固定不变的
例如
.main{
float:right;
Width:70%;
}
.leftBar{
float:left;
Width:25%;
}
Float:
两个元素如果并列显示不下,后面的元素会自动在前面元素的下方显示。
而不会出现水平方向的overflow(溢出)
避免了水平滚动条的出现。
页面布局结构的响应式调整一般可以使用独立的样式表
#wrapper
#content
#sidebar
#nav
Ipad 独有的orientation属性
Orientation的值:
Landscape(横屏)
Portraint(竖屏)
对于其他可以转屏的设备如iPhone 可以使用max-device-width或者min-device-width实现
所有的主流浏览器都支持Media queries 包括IE9
对于老式浏览器(IE6,IE7,IE8)可以考虑css3-mediaqueries.js
响应式Web设计:
同比例缩放尺寸
调整页面结构布局
页面中的文字信息不能简单地同比例缩小
Visibility:hidden:视觉上不做呈现
Display:none :设置整块内容是否需要被输出
媒介查询(P37)
触屏设备(P38)手指点击就是click行为
BootStrap固定栅格和流式栅格(p53)
堆叠和水平排列是栅格系统中列的两种基本布局方式(p54 内容不全)
堆叠布局:手机和平板设备
水平排列布局;桌面及以上
Col-md-2
Col-sm-2(堆叠改变为水平)
Col-xs-2(堆叠改变为水平 超级小屏幕)
.clearfix 设置第一列单行显示(不知道有什么作用 P56)
列偏移:offset可以将列偏移到右侧(P57)
Offset偏移宽度需要和col宽度进行合并计算(都要有)
列嵌套:一行三列(就是我们平常用到的)
列排序:push和pull相关类实现