博客列表 >参考课件中的练习目录,仿写页脚与主体 与思考移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么

参考课件中的练习目录,仿写页脚与主体 与思考移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么

alexcy的学习博客
alexcy的学习博客原创
2023年02月12日 16:47:44261浏览

1. 参考课件中的练习目录,仿写页脚与主体

  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. <link rel="stylesheet" href="css/reset.css">
  9. <link rel="stylesheet" href="font_icon/iconfont.css">
  10. <link rel="stylesheet" href="css/header.css">
  11. <link rel="stylesheet" href="css/footer.css">
  12. </head>
  13. <body>
  14. <!-- 页眉 -->
  15. <header>
  16. <!-- logo -->
  17. <a class="logo" href="#"><img src="./images/taobao.png" alt=""></a>
  18. <!-- 搜索框 -->
  19. <a href="#" class="search">
  20. <span>寻找宝贝店铺</span>
  21. <span>搜索</span>
  22. </a>
  23. <!-- 签到 -->
  24. <a href="#" class="iconfont icon-qiandao-xuanzhong"></a>
  25. </header>
  26. <!-- 主体 -->
  27. <main>
  28. <div class="tag">
  29. <ul>
  30. <li><a href="#">
  31. <img src="./images/navs/tmxb.webp" alt="">
  32. <span>天猫新品</span>
  33. </a></li>
  34. <li><a href="#">
  35. <img src="./images/navs/jrbk.webp" alt="">
  36. <span>今日爆款</span>
  37. </a></li>
  38. <li><a href="#">
  39. <img src="./images/navs/tmgj.webp" alt="">
  40. <span>天猫国际</span>
  41. </a></li>
  42. <li><a href="#">
  43. <img src="./images/navs/fzlx.webp" alt="">
  44. <span>飞猪旅行</span>
  45. </a></li>
  46. <li><a href="#">
  47. <img src="./images/navs/tmcx.webp" alt="">
  48. <span>天猫超市</span>
  49. </a></li>
  50. <li><a href="#">
  51. <img src="./images/navs/tbch.webp" alt="">
  52. <span>淘宝吃货</span>
  53. </a></li>
  54. <li><a href="#">
  55. <img src="./images/navs/sqk.webp" alt="">
  56. <span>省钱卡</span>
  57. </a></li>
  58. <li><a href="#">
  59. <img src="./images/navs/ltjb.webp" alt="">
  60. <span>领淘宝金币</span>
  61. </a></li>
  62. <li><a href="#">
  63. <img src="./images/navs/alpm.webp" alt="">
  64. <span>阿里拍卖</span>
  65. </a></li>
  66. <li><a href="#">
  67. <img src="./images/navs/fl.webp" alt="">
  68. <span>分类</span>
  69. </a></li>
  70. </ul>
  71. </div>
  72. <div class="shop">
  73. <ul>
  74. <li><a href="#">
  75. <img src="./images/items/item-1.webp" alt="">
  76. <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  77. <div class="price">
  78. <span>¥ 10.8</span>
  79. <span>100+人已购买</span>
  80. </div>
  81. </a></li>
  82. <li><a href="#">
  83. <img src="./images/items/item-2.webp" alt="">
  84. <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  85. <div class="price">
  86. <span>¥ 10.8</span>
  87. <span>100+人已购买</span>
  88. </div>
  89. </a></li>
  90. <li><a href="#">
  91. <img src="./images/items/item-3.webp" alt="">
  92. <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  93. <div class="price">
  94. <span>¥ 10.8</span>
  95. <span>100+人已购买</span>
  96. </div>
  97. </a></li>
  98. <li><a href="#">
  99. <img src="./images/items/item-4.webp" alt="">
  100. <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  101. <div class="price">
  102. <span>¥ 10.8</span>
  103. <span>100+人已购买</span>
  104. </div>
  105. </a></li>
  106. <li><a href="#">
  107. <img src="./images/items/item-5.webp" alt="">
  108. <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  109. <div class="price">
  110. <span>¥ 10.8</span>
  111. <span>100+人已购买</span>
  112. </div>
  113. </a></li>
  114. <li><a href="#">
  115. <img src="./images/items/item-6.webp" alt="">
  116. <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  117. <div class="price">
  118. <span>¥ 10.8</span>
  119. <span>100+人已购买</span>
  120. </div>
  121. </a></li>
  122. </ul>
  123. </div>
  124. </main>
  125. <!-- 页脚 -->
  126. <footer>
  127. <a href="#" class="iconfont icon-taobao"></a>
  128. <a href="#" class="iconfont icon-gouwuche"><span>购物车</span></a>
  129. <a href="#" class="iconfont icon-wode"><span>我的淘宝</span></a>
  130. </footer>
  131. </body>
  132. </html>

  1. header {
  2. top: 0;
  3. left: 0;
  4. right: 0;
  5. z-index: 999;
  6. display: grid;
  7. /* 1行三列 */
  8. grid-template-columns: .58rem 1fr .33rem;
  9. grid-auto-rows: 0.5rem;
  10. place-items: center;
  11. gap: 0.1rem;
  12. background: #f4f4f4;
  13. }
  14. header a.logo {
  15. padding-left: .1rem;
  16. }
  17. header > a.search {
  18. width: 100%;
  19. border: 1px solid #ff5000;
  20. height: .35rem;
  21. border-radius: .3rem;
  22. display: flex;
  23. place-content: space-between;
  24. place-items: center;
  25. }
  26. header > a.search> span:first-child{
  27. padding-left: .1rem;
  28. }
  29. header > a.search> span:last-child{
  30. padding: .06rem .2rem;
  31. margin-right: .01rem;
  32. /* 渐变 */
  33. background: linear-gradient(to left,#ff5000,#ffc000);
  34. color: #fff;
  35. border-radius: .3rem;
  36. }
  37. header > a.iconfont {
  38. color: #ff5000;
  39. font-size: .24rem;
  40. }
  41. footer{
  42. bottom: 0;
  43. left: 0;
  44. right: 0;
  45. z-index: 999;
  46. }
  47. header,
  48. footer{
  49. height: 50px;
  50. position: fixed;
  51. }
  52. main{
  53. position: relative;
  54. top: 50px;
  55. }
  56. main .tag >ul {
  57. display: grid;
  58. grid-template-columns: repeat(5,1fr);
  59. grid-template-rows: .70rem .70rem;
  60. text-align: center;
  61. background-color: #fff;
  62. border-radius: .12rem;
  63. margin-top: .1rem;
  64. gap: .01rem;
  65. }
  66. main .tag >ul li img{
  67. width: .61rem;
  68. }
  69. main .shop > ul {
  70. margin-top: .1rem;
  71. display: grid;
  72. grid-template-columns: repeat(2,1fr);
  73. gap: .1rem;
  74. }
  75. main .shop > ul li {
  76. background-color: #fff;
  77. border-radius: .12rem;
  78. overflow: hidden;
  79. }
  80. main .shop > ul li .title{
  81. padding: .1rem;
  82. }
  83. main .shop > ul li .price {
  84. padding: .1rem;
  85. }
  86. main .shop > ul li .price span:first-child{
  87. color: #ff5000;
  88. font-size: .14rem;
  89. }
  90. main .shop > ul li .price span:last-child{
  91. margin-left: .1rem;
  92. }

效果图:

2. (附加)思考, 移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么


a.当只设置width属性值,而不指定initial-scale属性值时,大多数浏览器会自动缩放。


当只设置width属性值,而不指定initial-scale属性值时,大多数浏览器会自动缩放。
如果width属性值大于理想视口宽度,则视觉视口放大为width的值,计算得到scale小于1.0;

如果width属性值小于理想视口宽度,则视觉视口缩小为width的值,计算得到scale大于1.0;

这么做的目的是让设备屏幕把完整的页面呈现出来(页面横向塞满屏幕,计算得到scale),


  1. 布局视口 = 视觉视口 = 理想视口/缩放比例

b.当只指定initial-scale属性,而不设置width属性时,浏览器会将布局视口宽度设置为视觉视口宽度,以将页面正好铺满屏幕。因为initial-scale属性用于设置页面初始的缩放比例,缩放比例为理想视口与视觉视口的比值。当指定initial-scale = 1,而不设置width属性时,大部分浏览器会将布局视口宽度设置为设备理想视口宽度。


  1. 因为:initial-scale = 1.0
  2. 所以:视觉视口 = 理想视口 / .0 =理想视口
  3. 又因为: 没有设置width
  4. 所以:视觉视口 = 布局视口
  5. 所以:视觉视口 = 布局视口 = 理想视口

综上所述,只写initial-scale = 1.0可以达到同样效果

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议