Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1028 使用Grid / Flex , 编写淘宝网PC端首页布局
Blogger Information
Blog 21
fans 0
comment 0
visits 10047
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1028 使用Grid / Flex , 编写淘宝网PC端首页布局
放手去爱
Original
472 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <!-- 视口： viewport ； 布局视口宽度：width=device-width ；不需要缩放，因为当前处于理想视口状态 initial-scale=1.0   -->
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>仿淘宝移动端首页布局顶部页眉</title>
  9.     <style>
  10.       html {
  11.         /* 电脑端写法
  12.         html{font-size:100px;}
  13.         */
  14.         /* 手机端 动态计算rem */
  15.         font-size: calc(100vw / 3.75px);
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <!--移动端的布局单位三个问题？
  21.      1.为什么用rem ？因为rem = html.font-size 而html 一个页面只有一个，所以用rem 具有唯一性 
  22.     所以可以确保，在页面的任何地方引用rem，可确保总是计算出一个确定的值
  23.     1rem = 100px ；是为了计算方便
  24.     为什么不能将rem 写死。
  25.     默认情况下 rem 应该是一个常量 html.font-size 
  26.     使用rem + vw 实现动态的 rem 
  28.     三个视口
  29.     1. 布局视口 ,面向开发者，与设备无关
  30.     2. 视觉视口：与具体的硬件相关，用户看到的手机屏幕大小 `device-width `
  31.     3. 理想视口：抽像的 `width =  device-width` `initial-scale=1.0`原比列显示
  32.     -->
  34.     <!-- rem + vw 
  35.    * 1. 1vw = ?
  36.    苹果SE 为例 = 375px = 100vw ; 1vw = 1 / 100vw = 1 / 375px = 3.75px 
  37.    375px : 1vw = 3.75px 
  38.     *2. 1rem = ?
  39.     *3. DPR : DPR 设备像素比 =  设备像素 / 布局像素
  40.         苹果SE 为例 : DPR 2 = 750px / 355px 
  41.         布局时用375px ，在设备中显示时，可以根据DPR 换算成物理像素  
  42.     -->
  43.     <!-- 头部 -->
  44.     <style>
  45.       * {
  46.         margin: 0;
  47.         padding: 0;
  48.         box-sizing: border-box;
  49.       }
  50.       a {
  51.         text-decoration: none;
  52.         color: black;
  53.       }
  55.       html {
  56.         /* font-size: 100px; */
  57.         font-size: calc(100vw / 3.75);
  58.       }
  59.       body {
  60.         font-size: 0.13rem;
  61.         color: black;
  62.         margin: auto;
  63.         padding: 0 0.15rem;
  64.       }
  65.       body img {
  66.         width: 100%;
  67.       }
  68.       @media (max-width: 320px) {
  69.         html {
  70.           font-size: 85px;
  71.         }
  72.       }
  73.       @media (min-width: 640px) {
  74.         html {
  75.           font-size: 160px;
  76.         }
  77.       }
  78.       header {
  79.         display: grid;
  80.         grid-template-columns: 0.58rem 1fr 0.33rem;
  81.         grid-auto-rows: 0.5rem;
  82.         place-items: center;
  83.         gap: 10px;
  84.       }
  85.       header a.logo {
  86.         padding: 0.1rem;
  87.         background-color: bisque;
  88.       }
  89.       header > a.search {
  90.         width: 100%;
  91.         height: 0.3rem;
  92.         border-radius: 0.1rem;
  93.         border: 2px solid #e78514;
  94.         /* grid: 整体 flex: 细节 */
  95.         display: flex;
  96.         place-content: space-between;
  97.         place-items: center;
  98.       }
  99.       header > a.search > span:first-of-type {
  100.         padding-left: 0.1rem;
  101.       }
  102.       header > a.search > span:last-of-type {
  103.         background: linear-gradient(to left, #e78514, #f3c992);
  104.         color: aliceblue;
  105.         padding: 0.05rem 0.15rem;
  106.         border-radius: 0.02rem;
  107.       }
  108.       header > a.iconfont {
  109.         color: #f0ede9;
  110.         font-size: 0.14rem;
  111.         background-color: #e78514;
  112.         padding: 0.02rem;
  113.       }
  114.       main {
  115.         background-color: burlywood;
  116.         main-height: 2000px;
  117.         position: relative;
  118.         top: 50px;
  119.       }
  121.       footer {
  122.         position: fixed;
  123.         bottom: 0;
  124.         background: wheat;
  125.       }
  126.     </style>
  127.     <header>
  128.       <!-- logo -->
  129.       <a href="http://m.taobao.com" class="logo"
  130.         ><img src="images/logo.png" alt="LOGO"
  131.       /></a>
  132.       <!-- 搜索 -->
  133.       <a href="" class="search"><span>导店内宝贝</span><span>搜索</span></a>
  134.       <!-- 签到 -->
  135.       <a href="" class="iconfont icon-qiandao-xuanzhong">签到</a>
  136.     </header>
  138.     <!-- 内容 -->
  139.     <main>内容</main>
  140.     <!-- 底部 -->
  141.     <footer>页脚</footer>
  142.   </body>
  143. </html>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post