使用em属性进行对移动端的适配
常用代码:
代码 | 值 | 说明 |
---|---|---|
@media | 必带参数 | @media onyl screen (max-width: 400px) and (min-width: 500px),意思是当检测屏幕在最小宽为400px,最大宽为500px时,其中media我理解为检测,oly老师说可以省略,为了能记住,就写上了 |
max-width | px | 小于当前,比如html我font-size为16px,max值设置适配当前屏幕宽为300*500,px为15px,设置max-width小于300时为10px,当检测屏幕小于300时,页面的字体就变为了10px,这时在字体,宽度等用rem设定的值会根据max-width的值缩小 |
mix-width | px | 大于当前,与max相反,当我设定的html中,font-size为16px,max值设置适配当前屏幕宽为300*500,px为15px,设置max-width大于500时为20px,这时在字体,宽度等用rem设定的值会根据max-width的值放大 |
具体代码及用法如下:
代码部分:
html代码部分:
<div>
<div>
<a href="" class="url1">移动适配</a>
<a href="" class="url2">移动适配</a>
<a href="" class="url3">移动适配</a>
<button>按钮确定一下</button>
</div>
</div>
设定当前屏幕的适配宽度,和字体大小:
@media only screen (max-width: 400px) and (min-width: 500px) {
html {
/* 当前适配的大小为,宽400-500之间 */
/* 需要注意的是,@media only screen必须写全,或者除了@media之外省略, */
font-size: 15px;
}
}
上面代码中,设定了一个font-size字体为15px,当html中字体默认为16px,但打开屏幕,检测到的宽度在400*500之间时,字体的大小就改为了15px.
示例代码截图:
代码min-width
用法:
}
@media (min-width: 501px) {
html {
/* 其当前意思是,当屏幕大小超过了设定的501px时,字体的大小html默认字体的大小将设定为20px,并非默认的16px */
font-size: 20px;
}
}
示例代码截图:
代码max-width
用法:
@media (max-width: 399px) {
html {
/* 当屏幕大小小于设定的399px时,html字体非默认的16px,而是现在定义的10px, */
font-size: 5px;
}
}
示例截图:
今日代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>移动适配</title>
</head>
##### 以下为示例的全部代码:
<body>
<div>
<div>
<a href="" class="url1">移动适配</a>
<a href="" class="url2">移动适配</a>
<a href="" class="url3">移动适配</a>
<button class="button">按钮确定一下</button>
</div>
</div>
<style>
html {
padding: 0;
margin: 0;
border: 0;
font-size: 10px;
}
.url1 {
font-size: 1rem;
background-color: hotpink;
color: khaki;
}
.url2 {
font-size: 1.5rem;
background-color: khaki;
color: green;
}
.url3 {
font-size: 2rem;
background-color: grey;
color: honeydew;
}
.button {
background-color: yellowgreen;
color: gray;
width: 10rem;
height: 2.5rem;
font-size: 0.5rem;
outline: hotpink solid 1px;
}
button:hover {
background-color: indigo;
color: ivory;
outline: lawngreen solid 1px;
cursor: pointer;
/* 知识点 移动过去改为鼠标 */
opacity: 0.5;
/* 知识点,透明度,越小,透明度越大 */
}
@media (min-width: 501px) {
html {
font-size: 20px;
}
}
@media only screen (max-width: 400px) and (min-width: 500px) {
html {
/* 需要注意的是,@media only screen必须写全,或者除了@media之外省略, */
font-size: 15px;
}
}
@media (max-width: 399px) {
html {
font-size: 5px;
}
}
</style>
</body>
</html>
固定/绝对/相对/默认定位说明及演练
代码表格值,及相关参数
参数 | 值 | 相关配合使用参数 | 说明 |
---|---|---|---|
position | relative | top,left,right,bottom | 当参数为relative时,是对于自身的相关绝对定位,配合上下左右代码使用,比如top:50px,那么就是想下偏移50px,相关定位有一个特殊情况,就是虽然自身相对于原来的位置偏移了,但是他的自身位置空间并没有释放,还是存在的。 |
position | absolute | top,left,right,bottom | 当参数为absolute时,对于上级非static位置进行相对定位,有一特殊情况,上级均为static默认参数时,将认定为body为上级,将在body的基础上进行相关定位。 |
position | fixed | top,left,right,bottom | 固定定位,这个固定定位相当于absolute的子参数吧,因为fixed永远跟着body走,根据body进行定位 |
position | static | top,left,right,bottom | 出生即默认参数,出生就是这个 |
具体分析代码示例:position: relative;
示例
<div class="box">
<div class="box1">测试定位1</div>
<div class="box2">测试定位2</div>
<div class="box3">测试定位3</div>
</div>
上面先写四个盒子
.box1 {
width: 100px;
height: 100px;
background-color: khaki;
position: relative;
/* 绝对定位,根据自身未知进行偏移,并且不释放原有定位的空间。 */
top: 50px;
left: 50px;
}
示例代码成品图片:
具体代码示例:position: absolute;
示例
.box1 {
width: 100px;
height: 100px;
background-color: khaki;
/* position: relative; */
/* 绝对定位,根据自身未知进行偏移,并且不释放原有定位的空间。 */
position: absolute;
/* 将释放原有的空间,进行偏移, */
top: 50px;
left: 50px;
}
示例代码成品图片:
原图未释放空间:
使用代码position: absolute;
原空间释放后:
具体代码示例:position: fixed;
示例
.box1 {
width: 100px;
height: 100px;
background-color: khaki;
/* position: relative; */
/* 绝对定位,根据自身未知进行偏移,并且不释放原有定位的空间。 */
/* position: absolute; */
/* 将释放原有的空间,进行偏移, */
position: fixed;
top: 50px;
left: 50px;
margin: 50px;
/*为了使效果图更加有效果,当前在页面增加了margin:50px像素*/
/*这里看到,空间依旧释放,但是他的相对body定位,进行了偏移,margin:50px,上下左右各50px,加上原来的top50px,left50px,呈现的效果就出来了*/
}
示例代码成品图:
成品示例代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位</title>
</head>
<body>
<div class="box">
<div class="box1">测试定位1</div>
<div class="box2">测试定位2</div>
<div class="box3">测试定位3</div>
</div>
<style>
* {
padding: 0;
margin: 0;
border: 0;
}
/* position: relative; */
/* 自身偏移 相对定位元素,相对的空间就不释放,只是相对于原位置进行偏移 */
/* position: static; 默认定位*/
/* position: absolute; 根据包含块偏移 也就是上级,切上级的position不能是static,如果上级都是static,将认定为body为包含块, 绝对定位,空间有的空间进行释放,*/
/* position: fixed;固定定位,是绝对定位的一个子集,只不过包含块是固定的,永远是body。例如下部登录框,右下角提示语,左右侧QQ客服。
*/
.box1 {
width: 100px;
height: 100px;
background-color: khaki;
/* position: relative; */
/* 绝对定位,根据自身未知进行偏移,并且不释放原有定位的空间。 */
/* position: absolute; */
/* 将释放原有的空间,进行偏移, */
position: fixed;
top: 50px;
left: 50px;
margin: 50px;
}
.box2 {
width: 200px;
height: 200px;
background-color: lawngreen;
}
.box3 {
width: 300px;
height: 300px;
background-color: lightcoral;
}
.box {
width: 500px;
height: 500px;
}
</style>
</body>
</html>
flex容器及项目分配
常用值表格:
参数 | 值 | 示例 | 说明 |
---|---|---|---|
flex-direction | row | flex-direction: row; | 默认就是左对齐 |
flex-direction | row-reverse | flex-direction: row-reverse; | 右对齐 |
flex-direction | column | flex-direction: column; | 主轴成垂直 |
flex-wrap | wrap | flex-wrap: wrap; | 允许换行 |
flex-wrap | nowrap | flex-wrap: nowrap; | 不允许换行 |
下面是上面的合并属性 | |||
flex-flow | row wrap | flex-flow: row wrap; | 左对齐允许换行 |
flex-flow | row-reverse wrap | flex-flow: row-reverse wrap; | 右对齐允许换行 |
flex-flow | row nowrap | flex-flow: row nowrap; | 左对齐不允许换行 |
flex-flow: | row-reverse nowrap | flex-flow: row-reverse nowrap; | 右对齐不允许换行 |
下面是主轴项目空间分配 | |||
place-content | start | place-content: start; | 项目左对齐分配 |
place-content | end | place-content: end; | 项目右对齐分配 |
place-content | center | place-content: center; | 项目居中分配 |
place-content | space-between | place-content: space-between; | 项目两端分配 |
place-content | space-around | place-content: space-around; | 项目分散分配 |
place-content | space-evenly | place-content: space-evenly; | 项目平均分配 |
下面是交叉轴项目分配 | |||
place-items | start | place-items: start; | |
place-items | stretch | place-items: stretch; | |
place-items | end | place-items: end; | |
place-items | center | place-items: center; |
/* flex容器上只需要记住三个属性就可以了 */
/* 1. flex-flow: 主轴方向, 换行 */
/* 2. place-content: 项目在主轴上的排列与空间分配 */
/* 2. place-items: 项目在交叉轴上的对齐方式 */
代码的示例演示:
左对齐为官方默认对齐方式,这里不再做演示
右对齐示例代码:flex-direction: row-reverse;
<body>
<div class="body">
<!-- body为容器,因为class里面加了display:flex,使用了flex -->
<!-- 子级为项目 -->
<div class="ac ad1">测试</div>
<div class="ac ad2">测试</div>
<div class="ac ad3">测试</div>
</div>
</body>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-size: 10px;
}
.body {
display: flex;
height: 500px;
border: springgreen solid 1px;
flex-direction: row-reverse;
/*右对齐*/
}
.body>.ac {
width: 30em;
background-color: lightcoral;
border: lightseagreen solid 1px;
padding: 1em;
}
示例截图:
主轴成垂直示例代码:flex-direction: column;
.body {
display: flex;
height: 500px;
border: springgreen solid 1px;
/* flex-direction: row; */
/* 默认左对齐 */
/* flex-direction: row-reverse; */
/* 右对齐 */
flex-direction: column;
/* 主轴设置成了垂直 */}
示例截图:
主轴允许换行flex-wrap: wrap;
wrap改成nowrap为不允许换行
.body {
display: flex;
height: 500px;
border: springgreen solid 1px;
flex-direction: row;
/* 默认左对齐 */
/* flex-direction: row-reverse; */
/* 右对齐 */
/* flex-direction: column; */
/* 主轴设置成了垂直 */
flex-wrap: wrap;
/* 允许换行 */}
上面两个属性不经常用,经常用以下属性及属性值
代码示例:下列代码为上方代码的简写部分,比较常用
/* flex-flow: row wrap; */
/* 左对齐,允许换行 */
/* flex-flow: row-reverse wrap; */
/* 右对齐 允许换行 */
/* flex-flow: row nowrap; */
/* 左对齐 不允许换行 默认配置 */
/* flex-flow: row-reverse nowrap; */
/* 右对齐不允许换行 */
/* flex-flow: row wrap; */
下面为项目在主轴上空间分配部分:
/* 下面是项目的分配 */
/* place-content: start; */
/* 项目左对齐分配 */
/* place-content: end; */
/* 项目右对齐分配 */
/* place-content: center; */
/* 项目居中分配 */
/* place-content: space-between; */
/* 两端对齐,*/
/* place-content: space-around; */
/* 项目分散分配 */
/* place-content: space-evenly;
/* 项目平均分配 */
已全部演练完毕,随机拿1个截图示例:
项目交叉轴常用代码:
/* place-items: start; */
/* place-items: stretch;
place-items: end;
place-items: center; */
项目中需要记住以上三个参数即可:
/* 在flex项目中,只需记住三个参数, */
/* flex-flow: 项目的分配方式,需方两个值,一个是左右,一个是是否允许换行 */
/* place-content: 项目在主轴上的项目分配,在主轴上左右对齐分配,居中分配及两端和分散分配,也就是主轴上的排列和空间分配 place-items: 项目在交叉轴上的对齐方式 */
全部相关代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex项目系列</title>
</head>
<body>
<div class="body">
<!-- body为容器,因为class里面加了display:flex,使用了flex -->
<!-- 子级为项目 -->
<div class="ac ad1">测试</div>
<div class="ac ad2">测试</div>
<div class="ac ad3">测试</div>
</div>
</body>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-size: 10px;
}
.body {
display: flex;
height: 500px;
border: springgreen solid 1px;
flex-direction: row;
/* 默认左对齐 */
/* flex-direction: row-reverse; */
/* 右对齐 */
/* flex-direction: column; */
/* 主轴设置成了垂直 */
flex-wrap: wrap;
/* 允许换行 */
/* flex-wrap: nowrap; */
/* 不允许换行 */
/* 下面上面合并属性,是否允许换行和默认对齐方式 */
/* flex-flow: row wrap; */
/* 左对齐,允许换行 */
/* flex-flow: row-reverse wrap; */
/* 右对齐 允许换行 */
/* flex-flow: row nowrap; */
/* 左对齐 不允许换行 默认配置 */
/* flex-flow: row-reverse nowrap; */
/* 右对齐不允许换行 */
/* flex-flow: row wrap; */
/* 下面是项目的分配 */
/* place-content: start; */
/* 项目左对齐分配 */
/* place-content: end; */
/* 项目右对齐分配 */
/* place-content: center; */
/* 项目居中分配 */
/* place-content: space-between; */
/* 两端对齐,*/
/* place-content: space-around; */
/* 项目分散分配 */
/* place-content: space-evenly; */
/* 项目平均分配 */
/* place-items: start; */
/* place-items: stretch;
place-items: end;
place-items: center; */
/* 在flex项目中,只需记住三个参数, */
/* flex-flow: 项目的分配方式,需方两个值,一个是左右,一个是是否允许换行 */
/* place-content: 项目在主轴上的项目分配,在主轴上左右对齐分配,居中分配及两端和分散分配,也就是主轴上的排列和空间分配 place-items: 项目在交叉轴上的对齐方式 */
}
.body>.ac {
width: 30em;
background-color: lightcoral;
border: lightseagreen solid 1px;
padding: 1em;
}
</style>
</html>
flex属性及参数:
原始图片:
/* flex 的三个值,第一个放大因子,第二个,缩小因子,计算宽度 */
/* 其中flex计算宽度的权重大小为 max-width > 计算宽度 > width */
/* flex: 1 1 auto; */
/* 允许放大,允许缩小 */
flex: 1 0 auto;
/* 不允许放大,允许缩小 */
/* 也可放入单值 */
/* flex: 1px; */
/* 意思是允许放大和缩小 */
示例图片:目前使用的是允许放大,不允许缩小
成品代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex布局参数的值</title>
</head>
<body>
<div class="body">
<!-- body为容器,因为class里面加了display:flex,使用了flex -->
<!-- 子级为项目 -->
<div class="ac ad1">测试</div>
<div class="ac ad2">测试</div>
<div class="ac ad3">测试</div>
</div>
</body>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-size: 10px;
}
.body {
display: flex;
height: 500px;
border: springgreen solid 1px;
}
.body>.ac {
width: 30em;
background-color: lightcoral;
border: lightseagreen solid 1px;
padding: 1em;
/* flex 的三个值,第一个放大因子,第二个,缩小因子,计算宽度 */
/* 其中flex计算宽度的权重大小为 max-width > 计算宽度 > width */
/* flex: 1 1 auto; */
/* 允许放大,允许缩小 */
flex: 1 0 auto;
/* 不允许放大,允许缩小 */
/* 也可放入单值 */
/* flex: 1px; */
/* 意思是允许放大和缩小 */
}
</style>
</html>
flex子项目排序:
参数: order 默认属性为0,示例:order: 1;
此属性,可以为-1!
示例截图:
示例代码全部:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex布局参数的值</title>
</head>
<body>
<div class="body">
<!-- body为容器,因为class里面加了display:flex,使用了flex -->
<!-- 子级为项目 -->
<div class="ac ad1">测试一号</div>
<div class="ac ad2">测试二号</div>
<div class="ac ad3">测试三号</div>
</div>
</body>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-size: 10px;
}
.body {
display: flex;
height: 500px;
border: springgreen solid 1px;
}
.body>.ac {
width: 30em;
background-color: lightcoral;
border: lightseagreen solid 1px;
padding: 1em;
font-size: 3em;
text-align: center;
/* flex 的三个值,第一个放大因子,第二个,缩小因子,计算宽度 */
/* 其中flex计算宽度的权重大小为 max-width > 计算宽度 > width */
/* flex: 1 1 auto; */
/* 允许放大,允许缩小 */
flex: 1 1 auto;
/* 不允许放大,允许缩小 */
/* 也可放入单值 */
/* flex: 1px; */
/* 意思是允许放大和缩小 */
}
.body>div:first-of-type {
/* 这里意思是选中第一个,把默认的order的值0改为1,默认所有的子项目的值均为0,大在前,小在后 */
order: 1;
/* 当第一子项目的order的值改为了1之后,他就成为了最后一个 */
}
</style>
</html>