search

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

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

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

使用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">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>移动适配</title>
  9. </head>
  10. ##### 以下为示例的全部代码：
  11. <body>
  12.     <div>
  13.         <div>
  14.             <a href="" class="url1">移动适配</a>
  15.             <a href="" class="url2">移动适配</a>
  16.             <a href="" class="url3">移动适配</a>
  17.             <button class="button">按钮确定一下</button>
  18.         </div>
  19.     </div>
  21.     <style>
  22.         html {
  23.             padding: 0;
  24.             margin: 0;
  25.             border: 0;
  26.             font-size: 10px;
  27.         }
  29.         .url1 {
  30.             font-size: 1rem;
  31.             background-color: hotpink;
  32.             color: khaki;
  33.         }
  35.         .url2 {
  36.             font-size: 1.5rem;
  37.             background-color: khaki;
  38.             color: green;
  39.         }
  41.         .url3 {
  42.             font-size: 2rem;
  43.             background-color: grey;
  44.             color: honeydew;
  45.         }
  47.         .button {
  48.             background-color: yellowgreen;
  49.             color: gray;
  50.             width: 10rem;
  51.             height: 2.5rem;
  52.             font-size: 0.5rem;
  53.             outline: hotpink solid 1px;
  54.         }
  56.         button:hover {
  57.             background-color: indigo;
  58.             color: ivory;
  59.             outline: lawngreen solid 1px;
  60.             cursor: pointer;
  61.             /* 知识点 移动过去改为鼠标 */
  62.             opacity: 0.5;
  63.             /* 知识点，透明度，越小，透明度越大 */
  64.         }
  66.         @media (min-width: 501px) {
  67.             html {
  68.                 font-size: 20px;
  69.             }
  70.         }
  72.         @media only screen (max-width: 400px) and (min-width: 500px) {
  73.             html {
  74.                 /* 需要注意的是，@media only screen必须写全，或者除了@media之外省略， */
  75.                 font-size: 15px;
  76.             }
  77.         }
  79.         @media (max-width: 399px) {
  80.             html {
  81.                 font-size: 5px;
  82.             }
  83.         }
  84.     </style>
  85. </body>
  87. </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">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>定位</title>
  8. </head>
  10. <body>
  11.     <div class="box">
  12.         <div class="box1">测试定位1</div>
  13.         <div class="box2">测试定位2</div>
  14.         <div class="box3">测试定位3</div>
  15.     </div>
  17.     <style>
  18.         * {
  19.             padding: 0;
  20.             margin: 0;
  21.             border: 0;
  22.         }
  23.         /* position: relative; */
  24.         /* 自身偏移 相对定位元素，相对的空间就不释放，只是相对于原位置进行偏移 */
  25.         /* position: static; 默认定位*/
  26.         /* position: absolute; 根据包含块偏移 也就是上级，切上级的position不能是static，如果上级都是static，将认定为body为包含块， 绝对定位，空间有的空间进行释放，*/
  27.         /* position: fixed;固定定位，是绝对定位的一个子集，只不过包含块是固定的，永远是body。例如下部登录框，右下角提示语，左右侧QQ客服。
  28.     */
  30.         .box1 {
  31.             width: 100px;
  32.             height: 100px;
  33.             background-color: khaki;
  34.             /* position: relative; */
  35.             /* 绝对定位，根据自身未知进行偏移，并且不释放原有定位的空间。 */
  36.             /* position: absolute; */
  37.             /* 将释放原有的空间，进行偏移， */
  38.             position: fixed;
  39.             top: 50px;
  40.             left: 50px;
  41.             margin: 50px;
  42.         }
  44.         .box2 {
  45.             width: 200px;
  46.             height: 200px;
  47.             background-color: lawngreen;
  48.         }
  50.         .box3 {
  51.             width: 300px;
  52.             height: 300px;
  53.             background-color: lightcoral;
  54.         }
  56.         .box {
  57.             width: 500px;
  58.             height: 500px;
  59.         }
  60.     </style>
  61. </body>
  63. </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.     }
  18.     .body {
  19.         display: flex;
  20.         height: 500px;
  21.         border: springgreen solid 1px;
  22.          flex-direction: row-reverse; 
  23.          /*右对齐*/
  24.          }
  26.     .body>.ac {
  27.         width: 30em;
  28.         background-color: lightcoral;
  29.         border: lightseagreen solid 1px;
  30.         padding: 1em;
  31.     }

示例截图：

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

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

示例代码全部：

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

相关文章

查看更多