移动端布局方案学习，并简易仿写今日头条移动端布局

原创 阁主  2023-07-27 09:19:38  阅读 764 次 评论 0 条
摘要：

记录移动端布局方案,并简易仿照今日头条移动端布局的学习笔记。

三个视口

  1. 布局视口(Layout viewport): CSS
  2. 视觉视口(Visual viewport): 页面显示区域
  3. 理想视口(Ideal viewport): 移动端

理想视口

  1. width=device-width: 布局视口宽度=设备视口宽度
  2. 不再使用默认的布局视口宽度(980px),防止出现缩放和滚动条

移动端布局方案

  1. rem + vw
  2. rem = html.font-size
  3. 1rem = 100px
  4. DPR: 设备像素比 = 设备像素 / 布局(CSS)像素
  5. iPhone SE = iPhone 6, DRP = 2
  6. 750px / 350px = 2
  7. 布局时用: 375px, 但是在设备中显示时,可以根据 DPR 换算成物理像素

rem 动态化

  1. 1rem = 100px = html.font-size
  2. iPhone6: 1rem = 100px = 375 / 3.75 = 100px
  3. iPhone12: 390/3.75 = 104px = 1rem
  4. rem 应该用一个相对单位表示,而不应该用绝对值 px
  5. 表示 rem 的相对单位: vw
  6. 100px => vw
  7. 375px = 100 宽度 = 100vw
  8. 100 * ? = 375px, ? = 3.75
  9. 1vw = 3.75px
  10. iPhone6: 375px = 3.75rem = 100vw
  11. rem 动态公式: font-size: calc(100vw / 3.75) = 100px
  12. 100vw 是一个相对值, 它的初始值(默认值): 375px

三个视口

  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.   <!-- 设置视口
  8.         width: 布局的时候的参考
  9.         device-width: 设备视口,就是显示页面的屏幕
  10.         width=device-width: 我直接为指定的设备进行布局
  11.   -->
  12.   <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
  13.   <meta name="viewport" content="width=device-width" />
  14.   <title>三个视口</title>
  15. </head>
  17. <body>
  18.   <div>Box</div>
  20.   <style>
  21.     html {
  22.       /* 1rem = 100px 是为了布局的 */
  23.       /* font-size: 100px; */
  25.       /* 375px 是手机的宽度 */
  26.       /* 手机100%宽度 = 375px = 100vw  */
  27.       /* vm: 视口的宽度,1vw = 1/100 */
  29.       /* font-size: calc(375px / 3.75); */
  31.       /* 375px = 100vw  */
  32.       /* 375px是一个绝对值  */
  33.       /* 100vw 是一个相对值 */
  34.       /* 500px = 100vw  */
  35.       /* 800px = 100vw  */
  37.       font-size: calc(100vw / 3.75);
  39.       /* 如果将rem 变成一个相对值,变量 */
  40.       /* iphone 6, 375px = 100vw , 1rem = 100px  */
  41.       /* iphone xr : 414px = 100vw , 1rem = 110.4px */
  43.       /* iphone 12 pro, 390px = 100vw  1rem = 104px  */
  44.     }
  46.     /* 必须在body中将字号还原 */
  47.     body {
  48.       /* 1rem = 100px */
  49.       /* 16px = 0.16rem = 0.16 * 100  */
  50.       font-size: 0.16rem;
  51.     }
  52.   </style>
  53. </body>
  55. </html>

手机端通用代码

  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.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.       box-sizing: border-box;
  14.     }
  16.     header {
  17.       background-color: lightblue;
  18.       top: 0;
  19.       left: 0;
  20.       right: 0;
  21.       /* 调整层级 */
  22.       z-index: 8;
  23.     }
  25.     footer {
  26.       background-color: lightgreen;
  27.       bottom: 0;
  28.       left: 0;
  29.       right: 0;
  30.     }
  32.     header,
  33.     footer {
  34.       /* 固定定位 */
  35.       position: fixed;
  36.       height: 50px;
  37.     }
  39.     main {
  40.       background-color: yellow;
  41.       min-height: 2000px;
  43.       position: relative;
  44.       top: 50px;
  45.     }
  46.   </style>
  47. </head>
  49. <body>
  50.   <!-- 1. 页眉 -->
  51.   <header>页眉</header>
  52.   <!-- 2. 主体 -->
  53.   <main>主体</main>
  54.   <!-- 3. 页脚 -->
  55.   <footer>页脚</footer>
  56. </body>
  58. </html>

仿今日头条移动端

效果图如下：
今日头条移动端布局效果

index.html文件代码：

  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.   <!-- 首页css  -->
  10.   <link rel="stylesheet" href="static/css/index.css">
  11. </head>
  13. <body>
  14.   <!-- 页眉 -->
  15.   <div class="header">
  16.     <!-- 1. 搜索框 -->
  17.     <div class="search">
  18.       <!-- 1.1 关键字输入框 left -->
  19.       <div class="keys">
  20.         <!-- 放大镜: 字体图标 -->
  21.         <span class="iconfont icon-fangdajing"></span>
  22.         <!-- 关键字,预置的 -->
  23.         <span>习近平主席访问俄罗斯</span>
  24.       </div>
  25.       <!-- 1.2 发布按钮 right-->
  26.       <div class="publish">
  27.         <!-- 字体图标 -->
  28.         <span class="iconfont icon-jiahao"></span>
  29.         <span>发布</span>
  30.       </div>
  31.     </div>
  32.     <!-- 2. 导航组 -->
  33.     <div class="navs">
  34.       <a href="" class="active">推荐</a>
  35.       <a href="">科技</a>
  36.       <a href="">数码</a>
  37.       <a href="">军事</a>
  38.       <a href="">科技</a>
  39.     </div>
  40.   </div>
  42.   <!-- 主体 -->
  43.   <div class="main">
  44.     <!--
  45.         1. 文本 + 标签
  46.         2. 左边文本 + 右边图片
  47.         3. 上面文本 + 三张图片
  48.         4. 上面文本 + 视频
  49.        -->
  51.     <!-- 1. 文本 + 标签 -->
  53.     <div class="rec-list">
  54.       <a href="" class="item">
  55.         <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  56.         <div class="desc">
  57.           <span class="tag">置顶</span>
  58.           <div class="other">
  59.             <span>已关注</span>
  60.             <span>央视新闻</span>
  61.             <span>1899条评论</span>
  62.           </div>
  63.         </div>
  64.       </a>
  65.       <a href="" class="item">
  66.         <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  67.         <div class="desc">
  68.           <span class="tag">置顶</span>
  69.           <div class="other">
  70.             <span>已关注</span>
  71.             <span>央视新闻</span>
  72.             <span>1899条评论</span>
  73.           </div>
  74.         </div>
  75.       </a>
  76.       <a href="" class="item">
  77.         <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  78.         <div class="desc">
  79.           <span class="tag">置顶</span>
  80.           <div class="other">
  81.             <span>已关注</span>
  82.             <span>央视新闻</span>
  83.             <span>1899条评论</span>
  84.           </div>
  85.         </div>
  86.       </a>
  87.       <a href="" class="item">
  88.         <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  89.         <div class="desc">
  90.           <span class="tag">置顶</span>
  91.           <div class="other">
  92.             <span>已关注</span>
  93.             <span>央视新闻</span>
  94.             <span>1899条评论</span>
  95.           </div>
  96.         </div>
  97.       </a>
  98.     </div>
  100.     <!-- 2. 左边文本 + 右边图片 -->
  101.     <div class="img1-list">
  102.       <a href="" class="item">
  103.         <!-- 文本 -->
  104.         <div class="left">
  105.           <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  106.           <div class="desc">
  107.             <span class="author">默默读书君</span>
  108.             <span class="replay-num">88条评论</span>
  109.             <span class="time">10小时前</span>
  110.           </div>
  111.         </div>
  112.         <!-- 图片  -->
  113.         <img src="static/images/1.jpeg" class="right"></>
  114.       </a>
  115.       <a href="" class="item">
  116.         <!-- 文本 -->
  117.         <div class="left">
  118.           <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  119.           <div class="desc">
  120.             <span class="author">默默读书君</span>
  121.             <span class="replay-num">88条评论</span>
  122.             <span class="time">10小时前</span>
  123.           </div>
  124.         </div>
  125.         <!-- 图片  -->
  126.         <img src="static/images/1.jpeg" class="right"></>
  127.       </a>
  128.       <a href="" class="item">
  129.         <!-- 文本 -->
  130.         <div class="left">
  131.           <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  132.           <div class="desc">
  133.             <span class="author">默默读书君</span>
  134.             <span class="replay-num">88条评论</span>
  135.             <span class="time">10小时前</span>
  136.           </div>
  137.         </div>
  138.         <!-- 图片  -->
  139.         <img src="static/images/1.jpeg" class="right"></>
  140.       </a>
  141.       <a href="" class="item">
  142.         <!-- 文本 -->
  143.         <div class="left">
  144.           <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  145.           <div class="desc">
  146.             <span class="author">默默读书君</span>
  147.             <span class="replay-num">88条评论</span>
  148.             <span class="time">10小时前</span>
  149.           </div>
  150.         </div>
  151.         <!-- 图片  -->
  152.         <img src="static/images/1.jpeg" class="right"></>
  153.       </a>
  154.     </div>
  156.     <!-- 3. 上面文本 + 三张图片 -->
  157.     <div class="img2-list">
  158.       <a href="" class="item">
  159.         <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇,将其私自引渡海牙,下场如何?</div>
  160.         <div class="imgs">
  161.           <img src="static/images/2.jpeg" alt="">
  162.           <img src="static/images/2.jpeg" alt="">
  163.           <img src="static/images/2.jpeg" alt="">
  164.         </div>
  165.       </a>
  166.       <a href="" class="item">
  167.         <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇,将其私自引渡海牙,下场如何?</div>
  168.         <div class="imgs">
  169.           <img src="static/images/2.jpeg" alt="">
  170.           <img src="static/images/2.jpeg" alt="">
  171.           <img src="static/images/2.jpeg" alt="">
  172.         </div>
  173.       </a>
  174.       <a href="" class="item">
  175.         <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇,将其私自引渡海牙,下场如何?</div>
  176.         <div class="imgs">
  177.           <img src="static/images/2.jpeg" alt="">
  178.           <img src="static/images/2.jpeg" alt="">
  179.           <img src="static/images/2.jpeg" alt="">
  180.         </div>
  181.       </a>
  182.       <a href="" class="item">
  183.         <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇,将其私自引渡海牙,下场如何?</div>
  184.         <div class="imgs">
  185.           <img src="static/images/2.jpeg" alt="">
  186.           <img src="static/images/2.jpeg" alt="">
  187.           <img src="static/images/2.jpeg" alt="">
  188.         </div>
  189.       </a>
  190.     </div>
  192.     <!-- 4. 上面文本 + 视频 -->
  193.     <div class="video-list">
  194.       <a href="" class="item">
  195.         <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  196.         <div class="video"><video src="static/images/v1.mp4" controls></video></div>
  197.       </a>
  198.       <a href="" class="item">
  199.         <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  200.         <div class="video"><video src="static/images/v1.mp4" controls></video></div>
  201.       </a>
  202.       <a href="" class="item">
  203.         <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  204.         <div class="video"><video src="static/images/v1.mp4" controls></video></div>
  205.       </a>
  206.       <a href="" class="item">
  207.         <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  208.         <div class="video"><video src="static/images/v1.mp4" controls></video></div>
  209.       </a>
  210.     </div>
  212.     <!-- 页脚  -->
  213.     <div class="footer">
  214.       <a href="" class="active">
  215.         <span class="iconfont icon-shouye"></span>
  216.         <span>首页</span>
  217.       </a>
  218.       <a href="">
  219.         <span class="iconfont icon-24gl-play"></span>
  220.         <span>视频</span>
  221.       </a>
  222.       <a href="">
  223.         <span class="iconfont icon-yonghuguanli_huaban"></span>
  224.         <span>小组</span>
  225.       </a>
  226.       <a href="">
  227.         <span class="iconfont icon-yonghu"></span>
  228.         <span>我的</span>
  229.       </a>
  230.     </div>
  231. </body>
  233. </html>

index.css文件代码：

  1. /* 初始化css */
  2. @import url('reset.css');
  3. /* 字体图标css */
  4. @import url('../font_icon/iconfont.css');
  5. /* 页眉 css  */
  6. @import url('header.css');
  7. /* 页脚 css  */
  8. @import url('footer.css');
  9. /* 主体 css  */
  10. @import url('main.css');

初始化css的reset.css文件代码：

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  8. /* 链接 */
  9. a {
  10.   text-decoration: none;
  11.   color: #555;
  12. }
  14. /* rem 随设备宽度自动适应 */
  15. html {
  16.   /* 1rem = 100px  */
  17.   font-size: calc(100vw / 3.75);
  18. }
  20. /* 字号重置 */
  21. body {
  22.   /* 移动端,禁止出现px  */
  23.   /* font-size: 16px; */
  24.   font-size: 0.16rem;
  26.   color: #333;
  28.   background-color: #fff;
  29.   /* 水平居中 */
  30.   margin: 0 auto;
  32.   /* 15px = 0.15rem  */
  33.   padding: 0 0.15rem;
  34. }
  36. /* 外部资源的自适应, img, video  */
  37. body img,
  38. body video {
  39.   width: 100%;
  40. }
  42. /* 可选: 媒体查询 */
  44. @media (max-width: 320px) {
  45.   html {
  46.     font-size: 85px;
  47.   }
  48. }
  50. @media (min-width: 640px) {
  51.   html {
  52.     font-size: 170px;
  53.   }
  54. }

页眉header.css文件代码：

  1. .header {
  2.   /* 固定定位 */
  4.   position: fixed;
  5.   left: 0;
  6.   top: 0;
  7.   right: 0;
  8.   border-bottom: 1px solid #ccc;
  10.   /* 层级,确保永远在最前面,不被其它元素盖住 */
  11.   z-index: 999;
  12.   background-color: #fff;
  13. }
  15. /* 搜索框 */
  16. .header .search {
  17.   background-color: red;
  18.   padding: 0.08rem 0.15rem;
  19.   /* 左输入框,右发布按钮 */
  20.   display: grid;
  21.   grid-template-columns: 1fr 0.5rem;
  22. }
  24. /* 关键字 */
  25. .header .search .keys {
  26.   background-color: #fff;
  27.   border-radius: 1.5rem;
  29.   display: flex;
  30.   /* 交叉轴居中 */
  31.   place-items: center;
  32.   padding-left: 0.1rem;
  33. }
  35. /* 发布按钮 */
  36. .header .search .publish {
  37.   color: white;
  38.   display: grid;
  39.   place-items: center;
  40. }
  42. /* 图标大小跳调整 */
  43. .header .search .publish > span:first-child {
  44.   font-size: 0.2rem;
  45. }
  47. /* 发布文字大小调整 */
  48. .header .search .publish > span:last-child {
  49.   font-size: xx-small;
  50. }
  51. /* ------------------------ */
  53. .header .navs {
  54.   display: flex;
  55.   place-content: space-around;
  57.   padding: 0.1rem 0 0.05rem;
  58. }
  60. .header .navs a.active {
  61.   color: red;
  62. }
  64. /* 激活状态下才会显示红色的下划线 */
  65. /* 伪元素, html代码中看不到的,通过css添加的 */
  66. /* 伪元素前面使用双冒号, ::before, ::after  */
  68. /* 宿主元素a 做为绝对定位的父级 */
  69. .header .navs a {
  70.   position: relative;
  71. }
  73. .header .navs a.active::after {
  74.   content: "";
  75.   position: absolute;
  76.   left: 0;
  77.   width: 0.3rem;
  78.   height: 0.03rem;
  79.   bottom: -0.04rem;
  80.   background-color: red;
  81. }

页脚footer.css文件代码：

  1. .footer {
  2.   position: fixed;
  3.   left: 0;
  4.   right: 0;
  5.   bottom: 0;
  7.   background-color: #efefef;
  9.   display: flex;
  10.   place-content: space-around;
  11. }
  13. .footer a {
  14.   display: grid;
  15.   place-items: center;
  17.   /* 12px  */
  18.   font-size: x-small;
  19. }
  21. /* 图标大一点  */
  22. .footer a .iconfont {
  23.   font-size: xx-large;
  24. }
  25. .footer a.active {
  26.   color: red;
  27. }

内容主体main.css文件代码：

  1. .main {
  2.   min-height: 2000px;
  3.   /* border: 1px solid #000; */
  5.   position: relative;
  6.   top: 1rem;
  7.   padding-bottom: 0.6rem;
  8. }
  10. /* 1. 文本 + 标签 */
  11. .main .rec-list .item {
  12.   display: block;
  13.   margin-top: 0.1rem;
  14. }
  16. .main .rec-list .item .desc {
  17.   display: flex;
  18.   font-size: xx-small;
  19.   gap: 0.1rem;
  20. }
  22. .main .rec-list .item .desc .tag {
  23.   color: red;
  24. }
  26. .main .rec-list .item .desc .other {
  27.   color: #ccc;
  28. }
  30. /* 2. 左边文本 + 右边图片 */
  31. .main .img1-list .item {
  32.   margin-top: 0.1rem;
  33.   display: grid;
  34.   grid-template-columns: 1fr 1.3rem;
  35.   gap: 0.2rem;
  36. }
  38. .main .img1-list .item .left {
  39.   display: grid;
  40.   /* 两端对齐 */
  41.   place-content: space-between;
  42. }
  44. .main .img1-list .item .left .desc {
  45.   font-size: xx-small;
  46.   color: #ccc;
  47. }
  49. /* 3. 上面文本 + 三张图片 */
  50. .main .img2-list .item {
  51.   display: block;
  52.   margin-top: 0.1rem;
  53. }
  55. .main .img2-list .item .imgs {
  56.   margin-top: 0.05rem;
  57.   display: grid;
  58.   grid-template-columns: repeat(3, 1fr);
  59.   gap: 0.05rem;
  60. }
  62. /* 4. 上面文本 + 视频 */
  63. .main .video-list .item {
  64.   display: block;
  65.   margin-top: 0.1rem;
  66. }
  68. .main .video-list .item .video {
  69.   margin-top: 0.05rem;
  70. }

附件

由于涉及到图标文件、字体文件、视频素材，同时上传一份完整源代码。

仿移动端今日头条大小：4.55MB
已经过安全软件检测无毒，请您放心下载。
本文地址：https://www.mainblog.cn/325.html
版权声明：本文为原创文章，版权归 阁主 所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。

评论已关闭！