响应式布局:设计理念是基于流动布局、弹性布局、弹性表格、弹性视频和媒体查询等技术组合,使用百分比布局创建流动的弹性界面,使用媒体查询来限制元素的变动范围,这两者组合到一起构成了响应式设计的和兴,固定宽度像素的布局无法适应多变的、未知的设备
px转为em公式:目标元素尺寸/上下文元素尺寸=百分比尺寸
响应式设计的优点:1、面对不同分辨率设备时,灵活性强
2、能够快捷解决多设备显示适应问题
响应式设计缺点:1、兼容各种设备,工作量大,效率低
2、代码累赘,会出现隐藏无用的元素,加载事件长
3、一定程度上改变了网站原有的布局结构会出现页面混乱情况
4、响应式设计是一种折中性质的解决方案,因多方面因素影响而达不到最佳影响,因为移动设备的分辨率种类比较多,而且各不相同,所以实现面向移动设备的响应式布局需要了解移动设备视口
meta设置浏览器视口的宽度:
<meta name="viewport" content="width=device-width,initial-scale=1.0 user-scalable=0">
属性 | 说明 |
width | 设置layout viewport 的宽度为一个正整数或字符串“width-device” |
initial-scale | 设置页面的初始缩放值为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值为一个数字可以带小数 |
maximum-scale | 允许用户的最大缩放值为一个数字可以带小数 |
height | 设置layout viewport 的高度为一个正整数或字符串“height-device” |
user-scalable | 是否允许用户进行缩放,值为 “no” (不允许)或 “yes” (允许) |
< meta viewport >:标签是由苹果公司在其Safari浏览器中引入的,目的就是解决移动设备的饰扣问题,后来安卓及各大浏览器厂商也都纷纷效仿,引入 < meta viewport > 标签的支持
媒体查询:
语法:@media 设备名 only(选取条件)not (选取条件)and (设备选取条件){
CSS样式规则;
}
字符间以空格相连,选取条件包含在小括号内,CSS样式规则为兼容设置的样式表,包含在中括号里面,only (限定某种设备,可省略)、and(逻辑与)和not(排除某种设备)为逻辑关键字,多种设备用逗号分隔
参数名 | 说明 |
all | 所有设备 |
Braille | 盲文 |
embossed | 盲文打印 |
handheld | 手持设备 |
文档打印或打印预览模式 | |
projection | 项目演示,比如幻灯片 |
screen | 演讲 |
speech | 演讲 |
tty | 固定间距字符网格的媒体,比如电传打印机 |
tv | 电视 |
媒体查询在网页中分两种方式:
一、在样式表中内嵌@media
@media all and (max-width:1024px){
/*适合低分辨率桌面浏览器和横屏ipad*/
}
@media all and (max-width:768px){
/ * 适合很低分辨率桌面浏览器和竖屏iPad*/
}
@media all and (max-width:480px){
/* 适合横屏 iPhone /Android/ */
}
@media all and (max-width:320px){
/ * 适合横屏 iPhone / Android/*/
}
@media all and (max-width:240px){
/ *适合低分辨率移动设备*/
}
二、在link中使用@media:
适合普通分辨率桌面浏览器和横屏iPad:
<link rel="stylesheet" type="type/css" media="all and (max-width:1024px)" href="pc.css"/>
适合低分辨率桌面浏览器和竖屏iPad:
<link rel="stylesheet" type="type/css" media="all and (max-width:768px)" href="ipad.css"/>
适合横屏iPhone/Android:
<link rel="stylesheet" type="type/css" media="all and (max-width:480px)" href="iphone1.css"/>
适合普通分辨率桌面浏览器和横屏iPad:
<link rel="stylesheet" type="type/css" media="all and (max-width:380px)" href="iphone2.css"/>
弹性布局:(也称为“弹性布局盒子”或“伸缩盒子”)
属性 | 属性值 |
display | 值为flex时,创建弹性布局容器 |
flex-direction | 伸缩流方向 取值有: row(默认值)水平方向,排列顺序与文档相同; row-reverse:水平方向,排列顺序与文档相反; column:垂直方向,排列顺序为从上到下; column-reverse:垂直方向,排列顺序为从下到上 |
flex-wrap | 伸缩流(包括方向与换行) nowrap(默认值)不换行,可能出现重叠或现象 wrap: 当内容超出容器一行时会自动换行,下一行的位置与交叉轴的方向一致 wrap-reverse: 当内容超出容器一行时会自动换行,下一行的位置与交叉轴的方向相反 column-reverse:主轴为垂直方向,排列顺序从下到上 |
flex-flow | 包含了盒子方向和换行,综合了flex-direction和flex-wrap属性 |
justify-content | flex-start:默认值,内容位于容器开头 flex-end:内容位于容器的结尾 center:内容位于容器中间 space-between:内容位于各行之间留有空白的容器内 space-around:内容位于各行之前、之间、之后都留有空白的容器内 |
align-items | stretch:默认值,项目被拉伸以适应容器 center:内容位于容器中间 flex-start:内容位于容器的开头 flex-end:内容位于容器的结尾 baseline:内容位于容器的基线上 |
flex | 设置检索弹性模型对象的子元素如何分配空间,flex-grow、flex-shrink和flex-basis属性的简写属性,即伸缩性,默认值: 0 1 auto |
order | 设置或检索弹性模型对象的子元素出现的顺序,默认值是0 |
flex-grow | 扩展比率 |
flex-shrink | 收缩比率 |
flex-basis | 内容的长度,合法值auto,inherit,或后跟%、px、em、或任何其他长度单位的数字,即伸缩基准值 |
多列布局:multi-column,是传统网页中块状布局模式的有力扩充
属性 | 说明 |
column-count | 指定列数 |
column-fill | 指定内容在列与列之间的分布方式,如果去balance值,则指浏览器确保不同列之间的长度差异尽可能小,如果去auto值则按照顺序填充列 |
column-gap | 指定列之间的距离 |
column-rule | 在一条声明中设置column-rule-*的简写属性 |
column-rule-color | 设置列之间的颜色规则,值为颜色 |
column-rule-style | 设置列之间的样式规则,取值和border-style的值相同 |
column-rule-width | 设置列之间的宽度 |
columns | 设置column-span和column-width的简写属性 |
column-span | 指定元素横向夸多少列,取值none和all |
column-width | 指定列和宽 |