1028 使用Grid / Flex , 编写淘宝网PC端首页布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 视口： viewport ； 布局视口宽度：width=device-width ；不需要缩放，因为当前处于理想视口状态 initial-scale=1.0   -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仿淘宝移动端首页布局顶部页眉</title>
    <style>
      html {
        /* 电脑端写法
        html{font-size:100px;}
        */
        /* 手机端 动态计算rem */
        font-size: calc(100vw / 3.75px);
      }
    </style>
  </head>
  <body>
    <!--移动端的布局单位三个问题？
     1.为什么用rem ？因为rem = html.font-size 而html 一个页面只有一个，所以用rem 具有唯一性 
    所以可以确保，在页面的任何地方引用rem，可确保总是计算出一个确定的值
    1rem = 100px ；是为了计算方便
    为什么不能将rem 写死。
    默认情况下 rem 应该是一个常量 html.font-size 
    使用rem + vw 实现动态的 rem 
    三个视口
    1. 布局视口 ,面向开发者，与设备无关
    2. 视觉视口：与具体的硬件相关，用户看到的手机屏幕大小 `device-width `
    3. 理想视口：抽像的 `width =  device-width` `initial-scale=1.0`原比列显示
    -->
    <!-- rem + vw 
   * 1. 1vw = ?
   苹果SE 为例 = 375px = 100vw ; 1vw = 1 / 100vw = 1 / 375px = 3.75px 
   375px : 1vw = 3.75px 
    *2. 1rem = ?
    *3. DPR : DPR 设备像素比 =  设备像素 / 布局像素
        苹果SE 为例 : DPR 2 = 750px / 355px 
        布局时用375px ，在设备中显示时，可以根据DPR 换算成物理像素  
    -->
    <!-- 头部 -->
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: black;
      }
      html {
        /* font-size: 100px; */
        font-size: calc(100vw / 3.75);
      }
      body {
        font-size: 0.13rem;
        color: black;
        margin: auto;
        padding: 0 0.15rem;
      }
      body img {
        width: 100%;
      }
      @media (max-width: 320px) {
        html {
          font-size: 85px;
        }
      }
      @media (min-width: 640px) {
        html {
          font-size: 160px;
        }
      }
      header {
        display: grid;
        grid-template-columns: 0.58rem 1fr 0.33rem;
        grid-auto-rows: 0.5rem;
        place-items: center;
        gap: 10px;
      }
      header a.logo {
        padding: 0.1rem;
        background-color: bisque;
      }
      header > a.search {
        width: 100%;
        height: 0.3rem;
        border-radius: 0.1rem;
        border: 2px solid #e78514;
        /* grid: 整体 flex: 细节 */
        display: flex;
        place-content: space-between;
        place-items: center;
      }
      header > a.search > span:first-of-type {
        padding-left: 0.1rem;
      }
      header > a.search > span:last-of-type {
        background: linear-gradient(to left, #e78514, #f3c992);
        color: aliceblue;
        padding: 0.05rem 0.15rem;
        border-radius: 0.02rem;
      }
      header > a.iconfont {
        color: #f0ede9;
        font-size: 0.14rem;
        background-color: #e78514;
        padding: 0.02rem;
      }
      main {
        background-color: burlywood;
        main-height: 2000px;
        position: relative;
        top: 50px;
      }
      footer {
        position: fixed;
        bottom: 0;
        background: wheat;
      }
    </style>
    <header>
      <!-- logo -->
      <a href="http://m.taobao.com" class="logo"
        ><img src="images/logo.png" alt="LOGO"
      /></a>
      <!-- 搜索 -->
      <a href="" class="search"><span>导店内宝贝</span><span>搜索</span></a>
      <!-- 签到 -->
      <a href="" class="iconfont icon-qiandao-xuanzhong">签到</a>
    </header>
    <!-- 内容 -->
    <main>内容</main>
    <!-- 底部 -->
    <footer>页脚</footer>
  </body>
</html>
相关文章
