search

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

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

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

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>
  67.                 <li><a href="#">
  68.                     <img src="./images/navs/fl.webp" alt="">
  69.                     <span>分类</span>
  70.                 </a></li>
  71.             </ul>
  72.         </div>
  74.         <div class="shop">
  75.             <ul>
  76.                 <li><a href="#">
  77.                     <img src="./images/items/item-1.webp" alt="">
  78.                     <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  79.                     <div class="price">
  80.                         <span>￥ 10.8</span>
  81.                         <span>100+人已购买</span>
  82.                     </div>
  83.                 </a></li>
  84.                 <li><a href="#">
  85.                     <img src="./images/items/item-2.webp" alt="">
  86.                     <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  87.                     <div class="price">
  88.                         <span>￥ 10.8</span>
  89.                         <span>100+人已购买</span>
  90.                     </div>
  91.                 </a></li>
  92.                 <li><a href="#">
  93.                     <img src="./images/items/item-3.webp" alt="">
  94.                     <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  95.                     <div class="price">
  96.                         <span>￥ 10.8</span>
  97.                         <span>100+人已购买</span>
  98.                     </div>
  99.                 </a></li>
  100.                 <li><a href="#">
  101.                     <img src="./images/items/item-4.webp" alt="">
  102.                     <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  103.                     <div class="price">
  104.                         <span>￥ 10.8</span>
  105.                         <span>100+人已购买</span>
  106.                     </div>
  107.                 </a></li>
  108.                 <li><a href="#">
  109.                     <img src="./images/items/item-5.webp" alt="">
  110.                     <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  111.                     <div class="price">
  112.                         <span>￥ 10.8</span>
  113.                         <span>100+人已购买</span>
  114.                     </div>
  115.                 </a></li>
  116.                 <li><a href="#">
  117.                     <img src="./images/items/item-6.webp" alt="">
  118.                     <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
  119.                     <div class="price">
  120.                         <span>￥ 10.8</span>
  121.                         <span>100+人已购买</span>
  122.                     </div>
  123.                 </a></li>
  124.             </ul>
  125.         </div>
  126.     </main>
  127.     <!-- 页脚 -->
  128.     <footer>
  129.         <a href="#" class="iconfont icon-taobao"></a>
  130.         <a href="#" class="iconfont icon-gouwuche"><span>购物车</span></a>
  131.         <a href="#" class="iconfont icon-wode"><span>我的淘宝</span></a>
  132.     </footer>
  133. </body>
  134. </html>
  1. header {
  2.     top: 0;
  3.     left: 0;
  4.     right: 0;
  5.     z-index: 999;
  7.     display: grid;
  8.     /* 1行三列 */
  9.     grid-template-columns: .58rem 1fr .33rem;
  10.     grid-auto-rows: 0.5rem;
  11.     place-items: center;
  12.     gap: 0.1rem;
  13.     background: #f4f4f4;
  14. }
  16. header a.logo {
  17.     padding-left: .1rem;
  18. }
  20. header > a.search {
  21.     width: 100%;
  22.     border: 1px solid #ff5000;
  23.     height: .35rem;
  24.     border-radius: .3rem;
  26.     display: flex;
  27.     place-content: space-between;
  28.     place-items: center;
  29. }
  31. header > a.search> span:first-child{
  32.     padding-left: .1rem;
  33. }
  35. header > a.search> span:last-child{
  36.     padding: .06rem .2rem;
  37.     margin-right: .01rem;
  38.     /* 渐变 */
  39.     background: linear-gradient(to left,#ff5000,#ffc000);
  40.     color: #fff;
  41.     border-radius: .3rem;
  42. }
  44. header > a.iconfont {
  45.     color: #ff5000;
  46.     font-size: .24rem;
  47. }
  49. footer{
  50.     bottom: 0;
  51.     left: 0;
  52.     right: 0;
  53.     z-index: 999;
  54. }
  55. header,
  56. footer{
  57.     height: 50px;
  58.     position: fixed;
  59. }
  60. main{
  61.     position: relative;
  62.     top: 50px;
  63. }
  65. main .tag >ul {
  66.     display: grid;
  67.     grid-template-columns: repeat(5,1fr);
  68.     grid-template-rows: .70rem .70rem;
  69.     text-align: center;
  70.     background-color: #fff;
  71.     border-radius: .12rem;
  72.     margin-top: .1rem;
  73.     gap: .01rem;
  74. }
  75. main .tag >ul li img{
  76.     width: .61rem;
  77. }
  79. main .shop > ul {
  80.     margin-top: .1rem;
  81.     display: grid;
  82.     grid-template-columns: repeat(2,1fr);
  83.     gap: .1rem;
  84. }
  86. main .shop > ul li {
  87.     background-color: #fff;
  88.     border-radius: .12rem;
  89.     overflow: hidden;
  90. }
  91. main .shop > ul li .title{
  92.     padding: .1rem;
  93. }
  94. main .shop > ul li .price {
  95.     padding: .1rem;
  96. }
  97. main .shop > ul li .price span:first-child{
  98.     color: #ff5000;
  99.     font-size: .14rem;
  100. }
  101. main .shop > ul li .price span:last-child{
  102.     margin-left: .1rem;
  103. }

效果图：

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可以达到同样效果

上一条：实例演示Grid常用的容器与项目属性，仿写PHP中文网首页:最新课程片断下一条：相对定位、绝对定位与固定定位的位置偏移演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多