网站页面自适应布局
自适应不同屏幕方式
-
简易场景
页面居中,元素宽度使用百分比匹配 -
复杂场景
1.可以编写几套css代码,再利用媒体查询技术,在不同屏幕下显示加载不同代码,代码工作量大,但比较好维护
2.响应式布局
1)栅格布局 ( 媒体查询 + 百分比 )
2)flex布局
一、媒体查询
媒体查询原理:通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。
-
常用匹配特征 media features
width/height: 浏览器宽高
max-width: 表示小于最大宽度时生效
min-width: 表示大于最小宽度时生效
device-width/device-height: 设备屏幕分辨率宽高
resolution: 设备分辨率
orientation:portrait(纵向),高度大于等于宽度时,landscape(横向),高度小于宽度时 -
特征匹配操作符
- and
@media (min-width: 1200px) and (orientation: landscape) {
...
}
// 表示当浏览器宽度大于等于1200px且为横向时CSS代码生效
- 逗号分隔
@media (max-width: 500px), handheld and (orientation: landscape) {
...
}
表示当浏览器宽度小于等于500px或者手持设备且为横向时生效
- 媒体查询引入
@media导入
@media screen and (max-width: 375px){
.container{
background: red;
}
}
link 引入方式
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
二、栅格布局
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。栅格布局随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
手机、平板、桌面
针对不同设备定义不同类
三、flex布局
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
任何一个容器元素都能指定成flex容器;块级元素:display:flex,行内元素也能使用flex布局: display:inline-flex;
- 容器的属性
1. flex-direction 决定主轴的方向
row | row-reverse | column | column-reverse;
(默认值)主轴为水平方向,起点在左端 | 水平方向,起点在右端 | 主轴为垂直方向,起点在上沿 | 主轴为垂直方向,起点在下沿
2. flex-wrap 是否换行
nowrap | wrap | wrap-reverse;
(默认值)不换行 | 第一行在上方 | 第一行在下方
3. flex-flow 是flex-direction属性和flex-wrap属性的简写形式
默认值row nowrap
4. justify-content 主轴上的对齐方式
flex-start | flex-end | center | space-between | space-around
(默认值)左对齐 | 右对齐 | 居中 | 两端对齐,项目之间的间隔都相等 | 每个项目两侧的间隔相等
5. align-items 交叉轴上对齐方式
flex-start | flex-end | center | baseline | stretch
交叉轴的起点对齐 | 终点对齐 | 中点对齐 | 第一行文字的基线对齐 | 默认值
6. align-content 定义了多根轴线的对齐方式 如果项目只有一根轴线,该属性不起作用
flex-start | flex-end | center | space-between | space-around | stretch
起点对齐 | 终点对齐 | 中点对齐 | 两端对齐 | 每根轴线两侧的间隔都相等 | 默认值
- 项目的属性
1. order 项目的排列顺序。数值越小,排列越靠前,默认为0
2. flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
3. flex-shrink 项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
4. flex-basis 在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
5. flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
6. align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
auto | flex-start | flex-end | center | baseline | stretch
未完待续。。。