博客列表 >使用em属性进行移动适配及使用固定/相对/绝对定位的演练并对flex常用属性进行演练操作

使用em属性进行移动适配及使用固定/相对/绝对定位的演练并对flex常用属性进行演练操作

卢先生
卢先生原创
2021年12月28日 17:36:56745浏览

使用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代码部分:
  1. <div>
  2. <div>
  3. <a href="" class="url1">移动适配</a>
  4. <a href="" class="url2">移动适配</a>
  5. <a href="" class="url3">移动适配</a>
  6. <button>按钮确定一下</button>
  7. </div>
  8. </div>

设定当前屏幕的适配宽度,和字体大小:

  1. @media only screen (max-width: 400px) and (min-width: 500px) {
  2. html {
  3. /* 当前适配的大小为,宽400-500之间 */
  4. /* 需要注意的是,@media only screen必须写全,或者除了@media之外省略, */
  5. font-size: 15px;
  6. }
  7. }

上面代码中,设定了一个font-size字体为15px,当html中字体默认为16px,但打开屏幕,检测到的宽度在400*500之间时,字体的大小就改为了15px.

示例代码截图:


代码min-width用法:

  1. }
  2. @media (min-width: 501px) {
  3. html {
  4. /* 其当前意思是,当屏幕大小超过了设定的501px时,字体的大小html默认字体的大小将设定为20px,并非默认的16px */
  5. font-size: 20px;
  6. }
  7. }
示例代码截图:

代码max-width用法:

  1. @media (max-width: 399px) {
  2. html {
  3. /* 当屏幕大小小于设定的399px时,html字体非默认的16px,而是现在定义的10px, */
  4. font-size: 5px;
  5. }
  6. }
示例截图:

今日代码:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>移动适配</title>
  8. </head>
  9. ##### 以下为示例的全部代码:
  10. <body>
  11. <div>
  12. <div>
  13. <a href="" class="url1">移动适配</a>
  14. <a href="" class="url2">移动适配</a>
  15. <a href="" class="url3">移动适配</a>
  16. <button class="button">按钮确定一下</button>
  17. </div>
  18. </div>
  19. <style>
  20. html {
  21. padding: 0;
  22. margin: 0;
  23. border: 0;
  24. font-size: 10px;
  25. }
  26. .url1 {
  27. font-size: 1rem;
  28. background-color: hotpink;
  29. color: khaki;
  30. }
  31. .url2 {
  32. font-size: 1.5rem;
  33. background-color: khaki;
  34. color: green;
  35. }
  36. .url3 {
  37. font-size: 2rem;
  38. background-color: grey;
  39. color: honeydew;
  40. }
  41. .button {
  42. background-color: yellowgreen;
  43. color: gray;
  44. width: 10rem;
  45. height: 2.5rem;
  46. font-size: 0.5rem;
  47. outline: hotpink solid 1px;
  48. }
  49. button:hover {
  50. background-color: indigo;
  51. color: ivory;
  52. outline: lawngreen solid 1px;
  53. cursor: pointer;
  54. /* 知识点 移动过去改为鼠标 */
  55. opacity: 0.5;
  56. /* 知识点,透明度,越小,透明度越大 */
  57. }
  58. @media (min-width: 501px) {
  59. html {
  60. font-size: 20px;
  61. }
  62. }
  63. @media only screen (max-width: 400px) and (min-width: 500px) {
  64. html {
  65. /* 需要注意的是,@media only screen必须写全,或者除了@media之外省略, */
  66. font-size: 15px;
  67. }
  68. }
  69. @media (max-width: 399px) {
  70. html {
  71. font-size: 5px;
  72. }
  73. }
  74. </style>
  75. </body>
  76. </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;示例
  1. <div class="box">
  2. <div class="box1">测试定位1</div>
  3. <div class="box2">测试定位2</div>
  4. <div class="box3">测试定位3</div>
  5. </div>
上面先写四个盒子
  1. .box1 {
  2. width: 100px;
  3. height: 100px;
  4. background-color: khaki;
  5. position: relative;
  6. /* 绝对定位,根据自身未知进行偏移,并且不释放原有定位的空间。 */
  7. top: 50px;
  8. left: 50px;
  9. }
示例代码成品图片:

具体代码示例:position: absolute;示例
  1. .box1 {
  2. width: 100px;
  3. height: 100px;
  4. background-color: khaki;
  5. /* position: relative; */
  6. /* 绝对定位,根据自身未知进行偏移,并且不释放原有定位的空间。 */
  7. position: absolute;
  8. /* 将释放原有的空间,进行偏移, */
  9. top: 50px;
  10. left: 50px;
  11. }
示例代码成品图片:

原图未释放空间:

使用代码position: absolute;原空间释放后:

具体代码示例:position: fixed;示例
  1. .box1 {
  2. width: 100px;
  3. height: 100px;
  4. background-color: khaki;
  5. /* position: relative; */
  6. /* 绝对定位,根据自身未知进行偏移,并且不释放原有定位的空间。 */
  7. /* position: absolute; */
  8. /* 将释放原有的空间,进行偏移, */
  9. position: fixed;
  10. top: 50px;
  11. left: 50px;
  12. margin: 50px;
  13. /*为了使效果图更加有效果,当前在页面增加了margin:50px像素*/
  14. /*这里看到,空间依旧释放,但是他的相对body定位,进行了偏移,margin:50px,上下左右各50px,加上原来的top50px,left50px,呈现的效果就出来了*/
  15. }

示例代码成品图:

成品示例代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>定位</title>
  7. </head>
  8. <body>
  9. <div class="box">
  10. <div class="box1">测试定位1</div>
  11. <div class="box2">测试定位2</div>
  12. <div class="box3">测试定位3</div>
  13. </div>
  14. <style>
  15. * {
  16. padding: 0;
  17. margin: 0;
  18. border: 0;
  19. }
  20. /* position: relative; */
  21. /* 自身偏移 相对定位元素,相对的空间就不释放,只是相对于原位置进行偏移 */
  22. /* position: static; 默认定位*/
  23. /* position: absolute; 根据包含块偏移 也就是上级,切上级的position不能是static,如果上级都是static,将认定为body为包含块, 绝对定位,空间有的空间进行释放,*/
  24. /* position: fixed;固定定位,是绝对定位的一个子集,只不过包含块是固定的,永远是body。例如下部登录框,右下角提示语,左右侧QQ客服。
  25. */
  26. .box1 {
  27. width: 100px;
  28. height: 100px;
  29. background-color: khaki;
  30. /* position: relative; */
  31. /* 绝对定位,根据自身未知进行偏移,并且不释放原有定位的空间。 */
  32. /* position: absolute; */
  33. /* 将释放原有的空间,进行偏移, */
  34. position: fixed;
  35. top: 50px;
  36. left: 50px;
  37. margin: 50px;
  38. }
  39. .box2 {
  40. width: 200px;
  41. height: 200px;
  42. background-color: lawngreen;
  43. }
  44. .box3 {
  45. width: 300px;
  46. height: 300px;
  47. background-color: lightcoral;
  48. }
  49. .box {
  50. width: 500px;
  51. height: 500px;
  52. }
  53. </style>
  54. </body>
  55. </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;
  1. /* flex容器上只需要记住三个属性就可以了 */
  2. /* 1. flex-flow: 主轴方向, 换行 */
  3. /* 2. place-content: 项目在主轴上的排列与空间分配 */
  4. /* 2. place-items: 项目在交叉轴上的对齐方式 */
代码的示例演示:
左对齐为官方默认对齐方式,这里不再做演示

右对齐示例代码:flex-direction: row-reverse;

  1. <body>
  2. <div class="body">
  3. <!-- body为容器,因为class里面加了display:flex,使用了flex -->
  4. <!-- 子级为项目 -->
  5. <div class="ac ad1">测试</div>
  6. <div class="ac ad2">测试</div>
  7. <div class="ac ad3">测试</div>
  8. </div>
  9. </body>
  10. <style>
  11. * {
  12. padding: 0px;
  13. margin: 0px;
  14. box-sizing: border-box;
  15. font-size: 10px;
  16. }
  17. .body {
  18. display: flex;
  19. height: 500px;
  20. border: springgreen solid 1px;
  21. flex-direction: row-reverse;
  22. /*右对齐*/
  23. }
  24. .body>.ac {
  25. width: 30em;
  26. background-color: lightcoral;
  27. border: lightseagreen solid 1px;
  28. padding: 1em;
  29. }

示例截图:

主轴成垂直示例代码:flex-direction: column;

  1. .body {
  2. display: flex;
  3. height: 500px;
  4. border: springgreen solid 1px;
  5. /* flex-direction: row; */
  6. /* 默认左对齐 */
  7. /* flex-direction: row-reverse; */
  8. /* 右对齐 */
  9. flex-direction: column;
  10. /* 主轴设置成了垂直 */}

示例截图:

主轴允许换行flex-wrap: wrap; wrap改成nowrap为不允许换行

  1. .body {
  2. display: flex;
  3. height: 500px;
  4. border: springgreen solid 1px;
  5. flex-direction: row;
  6. /* 默认左对齐 */
  7. /* flex-direction: row-reverse; */
  8. /* 右对齐 */
  9. /* flex-direction: column; */
  10. /* 主轴设置成了垂直 */
  11. flex-wrap: wrap;
  12. /* 允许换行 */}
上面两个属性不经常用,经常用以下属性及属性值
代码示例:下列代码为上方代码的简写部分,比较常用
  1. /* flex-flow: row wrap; */
  2. /* 左对齐,允许换行 */
  3. /* flex-flow: row-reverse wrap; */
  4. /* 右对齐 允许换行 */
  5. /* flex-flow: row nowrap; */
  6. /* 左对齐 不允许换行 默认配置 */
  7. /* flex-flow: row-reverse nowrap; */
  8. /* 右对齐不允许换行 */
  9. /* flex-flow: row wrap; */

下面为项目在主轴上空间分配部分:

  1. /* 下面是项目的分配 */
  2. /* place-content: start; */
  3. /* 项目左对齐分配 */
  4. /* place-content: end; */
  5. /* 项目右对齐分配 */
  6. /* place-content: center; */
  7. /* 项目居中分配 */
  8. /* place-content: space-between; */
  9. /* 两端对齐,*/
  10. /* place-content: space-around; */
  11. /* 项目分散分配 */
  12. /* place-content: space-evenly;
  13. /* 项目平均分配 */

已全部演练完毕,随机拿1个截图示例:

项目交叉轴常用代码:

  1. /* place-items: start; */
  2. /* place-items: stretch;
  3. place-items: end;
  4. place-items: center; */

项目中需要记住以上三个参数即可:

  1. /* 在flex项目中,只需记住三个参数, */
  2. /* flex-flow: 项目的分配方式,需方两个值,一个是左右,一个是是否允许换行 */
  3. /* place-content: 项目在主轴上的项目分配,在主轴上左右对齐分配,居中分配及两端和分散分配,也就是主轴上的排列和空间分配 place-items: 项目在交叉轴上的对齐方式 */
全部相关代码:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>flex项目系列</title>
  7. </head>
  8. <body>
  9. <div class="body">
  10. <!-- body为容器,因为class里面加了display:flex,使用了flex -->
  11. <!-- 子级为项目 -->
  12. <div class="ac ad1">测试</div>
  13. <div class="ac ad2">测试</div>
  14. <div class="ac ad3">测试</div>
  15. </div>
  16. </body>
  17. <style>
  18. * {
  19. padding: 0px;
  20. margin: 0px;
  21. box-sizing: border-box;
  22. font-size: 10px;
  23. }
  24. .body {
  25. display: flex;
  26. height: 500px;
  27. border: springgreen solid 1px;
  28. flex-direction: row;
  29. /* 默认左对齐 */
  30. /* flex-direction: row-reverse; */
  31. /* 右对齐 */
  32. /* flex-direction: column; */
  33. /* 主轴设置成了垂直 */
  34. flex-wrap: wrap;
  35. /* 允许换行 */
  36. /* flex-wrap: nowrap; */
  37. /* 不允许换行 */
  38. /* 下面上面合并属性,是否允许换行和默认对齐方式 */
  39. /* flex-flow: row wrap; */
  40. /* 左对齐,允许换行 */
  41. /* flex-flow: row-reverse wrap; */
  42. /* 右对齐 允许换行 */
  43. /* flex-flow: row nowrap; */
  44. /* 左对齐 不允许换行 默认配置 */
  45. /* flex-flow: row-reverse nowrap; */
  46. /* 右对齐不允许换行 */
  47. /* flex-flow: row wrap; */
  48. /* 下面是项目的分配 */
  49. /* place-content: start; */
  50. /* 项目左对齐分配 */
  51. /* place-content: end; */
  52. /* 项目右对齐分配 */
  53. /* place-content: center; */
  54. /* 项目居中分配 */
  55. /* place-content: space-between; */
  56. /* 两端对齐,*/
  57. /* place-content: space-around; */
  58. /* 项目分散分配 */
  59. /* place-content: space-evenly; */
  60. /* 项目平均分配 */
  61. /* place-items: start; */
  62. /* place-items: stretch;
  63. place-items: end;
  64. place-items: center; */
  65. /* 在flex项目中,只需记住三个参数, */
  66. /* flex-flow: 项目的分配方式,需方两个值,一个是左右,一个是是否允许换行 */
  67. /* place-content: 项目在主轴上的项目分配,在主轴上左右对齐分配,居中分配及两端和分散分配,也就是主轴上的排列和空间分配 place-items: 项目在交叉轴上的对齐方式 */
  68. }
  69. .body>.ac {
  70. width: 30em;
  71. background-color: lightcoral;
  72. border: lightseagreen solid 1px;
  73. padding: 1em;
  74. }
  75. </style>
  76. </html>
flex属性及参数:

原始图片:

  1. /* flex 的三个值,第一个放大因子,第二个,缩小因子,计算宽度 */
  2. /* 其中flex计算宽度的权重大小为 max-width > 计算宽度 > width */
  3. /* flex: 1 1 auto; */
  4. /* 允许放大,允许缩小 */
  5. flex: 1 0 auto;
  6. /* 不允许放大,允许缩小 */
  7. /* 也可放入单值 */
  8. /* flex: 1px; */
  9. /* 意思是允许放大和缩小 */
示例图片:目前使用的是允许放大,不允许缩小

成品代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>flex布局参数的值</title>
  7. </head>
  8. <body>
  9. <div class="body">
  10. <!-- body为容器,因为class里面加了display:flex,使用了flex -->
  11. <!-- 子级为项目 -->
  12. <div class="ac ad1">测试</div>
  13. <div class="ac ad2">测试</div>
  14. <div class="ac ad3">测试</div>
  15. </div>
  16. </body>
  17. <style>
  18. * {
  19. padding: 0px;
  20. margin: 0px;
  21. box-sizing: border-box;
  22. font-size: 10px;
  23. }
  24. .body {
  25. display: flex;
  26. height: 500px;
  27. border: springgreen solid 1px;
  28. }
  29. .body>.ac {
  30. width: 30em;
  31. background-color: lightcoral;
  32. border: lightseagreen solid 1px;
  33. padding: 1em;
  34. /* flex 的三个值,第一个放大因子,第二个,缩小因子,计算宽度 */
  35. /* 其中flex计算宽度的权重大小为 max-width > 计算宽度 > width */
  36. /* flex: 1 1 auto; */
  37. /* 允许放大,允许缩小 */
  38. flex: 1 0 auto;
  39. /* 不允许放大,允许缩小 */
  40. /* 也可放入单值 */
  41. /* flex: 1px; */
  42. /* 意思是允许放大和缩小 */
  43. }
  44. </style>
  45. </html>
flex子项目排序:

参数: order 默认属性为0,示例:order: 1;此属性,可以为-1!
示例截图:

示例代码全部:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>flex布局参数的值</title>
  7. </head>
  8. <body>
  9. <div class="body">
  10. <!-- body为容器,因为class里面加了display:flex,使用了flex -->
  11. <!-- 子级为项目 -->
  12. <div class="ac ad1">测试一号</div>
  13. <div class="ac ad2">测试二号</div>
  14. <div class="ac ad3">测试三号</div>
  15. </div>
  16. </body>
  17. <style>
  18. * {
  19. padding: 0px;
  20. margin: 0px;
  21. box-sizing: border-box;
  22. font-size: 10px;
  23. }
  24. .body {
  25. display: flex;
  26. height: 500px;
  27. border: springgreen solid 1px;
  28. }
  29. .body>.ac {
  30. width: 30em;
  31. background-color: lightcoral;
  32. border: lightseagreen solid 1px;
  33. padding: 1em;
  34. font-size: 3em;
  35. text-align: center;
  36. /* flex 的三个值,第一个放大因子,第二个,缩小因子,计算宽度 */
  37. /* 其中flex计算宽度的权重大小为 max-width > 计算宽度 > width */
  38. /* flex: 1 1 auto; */
  39. /* 允许放大,允许缩小 */
  40. flex: 1 1 auto;
  41. /* 不允许放大,允许缩小 */
  42. /* 也可放入单值 */
  43. /* flex: 1px; */
  44. /* 意思是允许放大和缩小 */
  45. }
  46. .body>div:first-of-type {
  47. /* 这里意思是选中第一个,把默认的order的值0改为1,默认所有的子项目的值均为0,大在前,小在后 */
  48. order: 1;
  49. /* 当第一子项目的order的值改为了1之后,他就成为了最后一个 */
  50. }
  51. </style>
  52. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议