微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > 使用em属性进行移动适配及使用固定/相对/绝对定位的演练并对flex常用属性进行演练操作
博主信息
博文 37
粉丝 1
评论 0
访问量 33041
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
使用em属性进行移动适配及使用固定/相对/绝对定位的演练并对flex常用属性进行演练操作
卢先生
原创
968人浏览过

使用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>
批改老师：PHPzPHPz

批改状态：合格

老师批语：写的很仔细，写完应该收获良多
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录