移动端布局原理

1.移动端布局的三个视口

视口	描述
`布局视口`	面向开发者的视口，与设备无关，默认宽度为980培训，用`width`表示
`视觉视口`	与具体设备硬件相关，用`device-width`表示
`理想视口`	一开始布局时,就直接使用视觉视口进行布局: `width = device-width`

在理想视口下, 用户浏览页面时,不需要缩放和拖动,原比例1:1显示: initial-scale=1.0

2.为什么使用1rem=100px计算？

rem引用的是html根元素的字号大小，而一个页面只有一个html根元素，可以保证rem值得唯一性
1rem=100px是为了方便计算元素的大小，与字号无关，所以要在body中重置字号大小：font-size:16px,这样设置是一个绝对值，会失去响应能力（自适应能力），大多数情况下，理想视口宽度为375px，则1rem=100px=375px/3.75=100px,故在body中重置大小时应写相对值：font-size：0.16rem

当字号大小设置为16px时，该怎样计算根元素html根元素中的字号大小，如下:
16px -> 1rem = 100px
当字号大小设置为12px时，该怎样计算根元素html根元素中的字号大小，如下:
12px -> 12/16 = 0.75 = 100 * 75 = 75px = 1rem
当字号大小设置为20px时，该怎样计算根元素html根元素中的字号大小，如下:
20px -> 20/16 = 1.25 = 100 * 1.25 = 125px = 1rem

3.使用rem+vw方案布局响应式页面

效果预览

html代码

    <body>
    <!-- 页眉 -->
    <header>
      <div class="logo">
        <img src="images/taobao.png" alt="" />
      </div>
      <div class="serch">
        <input type="serch" placeholder="寻找宝贝店铺" />
        <button class="btn">搜索</button>
      </div>
      <div class="qiandao">
        <img src="images/qiandao.png" alt="" />
      </div>
    </header>
    <main>
      <!-- 页面内容顶部导航 -->
      <ul class="topList">
        <li class="item">
          <a href="#"><img src="images/01.png" alt="" /></a>
          <a href="#">天猫新品</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/03.png" alt="" /></a>
          <a href="#">今日爆款</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/05.png" alt="" /></a>
          <a href="#">天猫国际</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/07.png" alt="" /></a>
          <a href="#">飞猪旅行</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/09.png" alt="" /></a>
          <a href="#">天猫超市</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/02.png" alt="" /></a>
          <a href="#">淘宝吃货</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/04.png" alt="" /></a>
          <a href="#">省钱卡</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/06.png" alt="" /></a>
          <a href="#">领淘金币</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/08.png" alt="" /></a>
          <a href="#">阿里拍卖</a>
        </li>
        <li class="item">
          <a href="#"><img src="images/10.png" alt="" /></a>
          <a href="#">分类</a>
        </li>
      </ul>
      <!-- 页面内容广告区域 -->
      <div class="advList">
        <div class="item" onclick="">
          <div class="title">
            <span>聚划算</span>
            <span>品牌折扣</span>
          </div>
          <img src="images/21.png" alt="" />
          <img src="images/22.png" alt="" />
        </div>
        <div class="item" onclick="">
          <div class="title">
            <span>天天特卖</span>
            <span>1元秒杀</span>
          </div>
          <img src="images/23.png" alt="" />
          <img src="images/24.png" alt="" />
        </div>
        <div class="item" onclick="">
          <div class="title">
            <span>有好货</span>
            <span>好口碑</span>
          </div>
          <img src="images/25.png" alt="" />
          <img src="images/26.png" alt="" />
        </div>
        <div class="item" onclick="">
          <div class="title">
            <span>每日好店</span>
            <span>特色</span>
          </div>
          <img src="images/27.png" alt="" />
          <img src="images/28.png" alt="" />
        </div>
      </div>
      <!-- 产品列表区域 -->
      <div class="prodList">
        <div class="item">
          <img src="images/30.png" alt="" />
        </div>
        <div class="item">
          <a href="#">
            <img src="images/31.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <img src="images/32.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <img src="images/33.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <img src="images/34.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <img src="images/35.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <img src="images/36.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <img src="images/34.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <img src="images/38.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <img src="images/36.png" alt="" />
          </a>
          <a href="#" class="title"
            >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
          >
          <div class="desc">
            <span class="price">￥39.9</span>
            <span>200+人已购买</span>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="bottom_icon">
        <span class="iconfont icon-taobao"></span>
      </div>
      <div class="bottom_icon">
        <span class="iconfont icon-gouwucheman"></span>
        <span>购物车</span>
      </div>
      <div class="bottom_icon">
        <span class="iconfont icon-wode"></span>
        <span>我的淘宝</span>
      </div>
    </footer>
  </body>

CSS代码

/* 重置样式 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  /* 设置根元素字号大小为100px，那么页面默认最终的字号大小为16px */
  font-size: 100px;
}
body {
  background-color: rgb(243, 245, 247);
  /* 根据根元素html的字号大小来重置字号大小，方便布局 */
  /* 默认：100px==>1px 最大：125px==>20px 最小：75px==>12px */
  font-size: 0.16rem;
  background-color: #f4f4f4;
  /* padding: 0 0.1rem; */
}
/* 媒体查询，当设备宽度大于470px时，设置根元素字号大小为125px */
@media (min-width: 470px) {
  html {
    /* 计算可得，页面最终字号大小为20px */
    font-size: 125px;
  }
}
/* 媒体查询，当设备宽度小于375px时，设置根元素字号大小为75px */
@media (max-width: 375px) {
  html {
    /* 计算可得，页面最终字号大小为14px */
    /* 12/16=0.75 */
    /* 1rem = 100 * 0.75 = 75px  */
    font-size: 75px;
  }
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #555;
}
/* 页眉顶部 */
body header {
  /* 声明弹性盒子 */
  display: flex;
  /* 两端对齐 */
  place-content: space-between;
  /* 所有项目在交叉轴上居中 */
  place-items: center;
  width: 100%;
  height: 0.5rem;
  background-color: #f4f4f4;
  position: fixed;
  z-index: 20;
  margin-top: -0.5rem;
  padding: 0.1rem;
}
body header .logo,
body header .qiandao,
body header .logo img {
  /* 使用vw响应式布局 */
  width: 15vw;
}
body header .qiandao img {
  width: 8vw;
  margin-left: 0.1rem;
}
/* 搜索*/
body header .serch {
  width: 60vw;
}
body header .serch input[type="serch"] {
  width: 60vw;
  height: 0.35rem;
  border: 0.015rem solid #ff5000;
  border-radius: 0.5rem;
  padding-left: 0.08rem;
}
body header .serch .btn {
  position: absolute;
  margin-left: -0.8rem;
  width: 0.7rem;
  height: 0.3rem;
  border-radius: 0.2rem;
  margin-top: 0.025rem;
  border: none;
  color: #f4f4f4;
  background-color: #ff8d0e;
}
body header .serch input {
  outline: none;
}
body main {
  width: 96%;
  margin: auto;
}
/* 页面内容  顶部导航*/
body main .topList {
  background-color: white;
  width: 100%;
  height: 2rem;
  margin-top: 0.5rem;
  border-radius: 0.15rem;
  /* 声明网格布局 */
  display: grid;
  /* 创建两行三列的表格 且行高和列宽自适应 */
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(5, 1fr);
  /* 垂直和水平方向都居中对齐 */
  place-items: center;
  /* 加阴影 */
  box-shadow: 0 0.01rem 0.03rem rgba(6, 6, 6, 0.2);
}
body main .topList .item {
  width: 90%;
  height: 90%;
  /* background-color: aqua; */
}
body main .topList .item a img {
  display: block;
  width: 80%;
  margin: auto;
}
body main .topList .item a:last-of-type {
  font-size: 0.14rem;
  color: #666;
  display: block;
  width: 80%;
  margin: auto;
  text-align: center;
}
/* 页面内容广告区 */
body main .advList {
  width: 100%;
  height: 2.2rem;
  margin-top: 0.1rem;
  border-radius: 0.15rem;
  background-image: url(../images/20.png);
  background-size: 100% 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  place-items: center;
}
body main .advList:hover {
  cursor: pointer;
}
body main .advList .item {
  width: 95%;
  height: 95%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 0.3rem 1fr;
  grid-auto-flow: column;
}
body main .advList {
  padding: 0.05rem;
  box-shadow: 0 0.01rem 0.03rem rgba(6, 6, 6, 0.2);
}
body main .advList .item .title {
  width: 100%;
  height: 0.4rem;
}
body main .advList .item .title span:first-of-type {
  font-size: 0.2rem;
  font-weight: bold;
}
body main .advList .item .title span:last-of-type {
  font-size: 0.16rem;
  position: absolute;
  height: 0.2rem;
  width: 0.7rem;
  background-color: rgb(255, 66, 0);
  margin-top: 0.02rem;
  margin-left: 0.02rem;
  text-align: center;
  color: #f4f4f4;
}
body main .advList .item img:first-of-type {
  width: 0.63rem;
  height: 0.63rem;
  margin: auto;
}
body main .advList .item img:last-of-type {
  width: 80%;
  grid-row: 1 / span 2;
  place-self: center;
}
body main .advList .item:nth-of-type(3) .title span:last-of-type {
  height: 0.2rem;
  width: 0.6rem;
  background-color: rgb(0, 144, 234);
}
body main .advList .item:last-of-type .title span:last-of-type {
  height: 0.2rem;
  width: 0.5rem;
  background-color: rgb(255, 151, 17);
}
/* 产品列表区域 */
body main .prodList {
  margin-top: 0.1rem;
  display: grid;
  grid-template-columns: repeat(2, 48%);
  /* 行间距/列间距 */
  gap: 0 0.1rem;
  grid-auto-rows: 3.2rem;
}
body main .prodList .item {
  display: flex;
  flex-direction: column;
  border-radius: 0.05rem;
  background-color: white;
  place-content: space-between;
  box-shadow: 0 0.01rem 0.05rem rgba(0, 0, 0, 0.4);
}
body main .prodList .item:first-of-type {
  height: 3rem;
  border-radius: 0.05rem;
  margin-top: 0.1rem;
}
body main .prodList .item:nth-of-type(2n) {
  margin-top: 0.1rem;
}
body main .prodList .item:nth-of-type(2n + 1):not(:first-of-type) {
  height: 3.1rem;
}
body main .prodList .item:first-of-type img {
  height: 100%;
  border-radius: 0.05rem;
}
body main .prodList .item img {
  width: 100%;
  border-radius: 0.05rem 0.05rem 0 0;
}
body main .prodList .item .title,
body main .prodList .item .desc {
  width: 90%;
  margin: auto;
  color: #000;
}
body main .prodList .item .desc .price {
  font-size: 00.16rem;
  color: #ff5500;
}
body main .prodList .item .desc span:last-of-type {
  font-size: 0.12rem;
  color: #666;
}
body footer {
  width: 100%;
  height: 0.8rem;
  background-color: white;
  margin-top: 0.1rem;
  display: flex;
  place-content: space-evenly;
  place-items: center;
}
/* body footer .bottom_icon{
  width: 0.6rem;
  height: 0.6rem;
} */
body footer .bottom_icon:first-of-type {
  width: 0.8rem;
  height: 0.8rem;
  background-color: #ff5500;
  border-radius: 0.8rem;
}
body footer .bottom_icon:first-of-type span:first-of-type {
  font-size: 0.6rem;
  display: block;
  margin-top: 0.1rem;
  margin-left: 0.1rem;
  color: #f4f4f4;
}
body footer .bottom_icon:not(:first-of-type) {
  display: grid;
  /* font-size: 0.4rem; */
  grid-template-rows: 0.5rem 0.2rem;
  grid-auto-columns: 0.8rem;
  place-items: center;
}
body footer .bottom_icon:not(:first-of-type) span:first-of-type {
  font-size: 0.4rem;
  color: #666;
}
body footer .bottom_icon:not(:first-of-type) span:last-of-type {
  width: 0.8rem;
  display: block;
  text-align: center;
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

uni-app之tab选项卡

2022-09-01 16:35:49