search

博客列表 >vw+rem移动端布局原理

vw+rem移动端布局原理

吴长清
吴长清原创
2022年07月18日 19:52:24459浏览

移动端布局原理

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代码

  1.     <body>
  2.     <!-- 页眉 -->
  3.     <header>
  4.       <div class="logo">
  5.         <img src="images/taobao.png" alt="" />
  6.       </div>
  7.       <div class="serch">
  8.         <input type="serch" placeholder="寻找宝贝店铺" />
  9.         <button class="btn">搜索</button>
  10.       </div>
  11.       <div class="qiandao">
  12.         <img src="images/qiandao.png" alt="" />
  13.       </div>
  14.     </header>
  15.     <main>
  16.       <!-- 页面内容顶部导航 -->
  17.       <ul class="topList">
  18.         <li class="item">
  19.           <a href="#"><img src="images/01.png" alt="" /></a>
  20.           <a href="#">天猫新品</a>
  21.         </li>
  22.         <li class="item">
  23.           <a href="#"><img src="images/03.png" alt="" /></a>
  24.           <a href="#">今日爆款</a>
  25.         </li>
  26.         <li class="item">
  27.           <a href="#"><img src="images/05.png" alt="" /></a>
  28.           <a href="#">天猫国际</a>
  29.         </li>
  30.         <li class="item">
  31.           <a href="#"><img src="images/07.png" alt="" /></a>
  32.           <a href="#">飞猪旅行</a>
  33.         </li>
  34.         <li class="item">
  35.           <a href="#"><img src="images/09.png" alt="" /></a>
  36.           <a href="#">天猫超市</a>
  37.         </li>
  38.         <li class="item">
  39.           <a href="#"><img src="images/02.png" alt="" /></a>
  40.           <a href="#">淘宝吃货</a>
  41.         </li>
  42.         <li class="item">
  43.           <a href="#"><img src="images/04.png" alt="" /></a>
  44.           <a href="#">省钱卡</a>
  45.         </li>
  46.         <li class="item">
  47.           <a href="#"><img src="images/06.png" alt="" /></a>
  48.           <a href="#">领淘金币</a>
  49.         </li>
  50.         <li class="item">
  51.           <a href="#"><img src="images/08.png" alt="" /></a>
  52.           <a href="#">阿里拍卖</a>
  53.         </li>
  54.         <li class="item">
  55.           <a href="#"><img src="images/10.png" alt="" /></a>
  56.           <a href="#">分类</a>
  57.         </li>
  58.       </ul>
  59.       <!-- 页面内容广告区域 -->
  60.       <div class="advList">
  61.         <div class="item" onclick="">
  62.           <div class="title">
  63.             <span>聚划算</span>
  64.             <span>品牌折扣</span>
  65.           </div>
  66.           <img src="images/21.png" alt="" />
  67.           <img src="images/22.png" alt="" />
  68.         </div>
  69.         <div class="item" onclick="">
  70.           <div class="title">
  71.             <span>天天特卖</span>
  72.             <span>1元秒杀</span>
  73.           </div>
  74.           <img src="images/23.png" alt="" />
  75.           <img src="images/24.png" alt="" />
  76.         </div>
  77.         <div class="item" onclick="">
  78.           <div class="title">
  79.             <span>有好货</span>
  80.             <span>好口碑</span>
  81.           </div>
  82.           <img src="images/25.png" alt="" />
  83.           <img src="images/26.png" alt="" />
  84.         </div>
  85.         <div class="item" onclick="">
  86.           <div class="title">
  87.             <span>每日好店</span>
  88.             <span>特色</span>
  89.           </div>
  90.           <img src="images/27.png" alt="" />
  91.           <img src="images/28.png" alt="" />
  92.         </div>
  93.       </div>
  94.       <!-- 产品列表区域 -->
  95.       <div class="prodList">
  96.         <div class="item">
  97.           <img src="images/30.png" alt="" />
  98.         </div>
  99.         <div class="item">
  100.           <a href="#">
  101.             <img src="images/31.png" alt="" />
  102.           </a>
  103.           <a href="#" class="title"
  104.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  105.           >
  106.           <div class="desc">
  107.             <span class="price">￥39.9</span>
  108.             <span>200+人已购买</span>
  109.           </div>
  110.         </div>
  111.         <div class="item">
  112.           <a href="#">
  113.             <img src="images/32.png" alt="" />
  114.           </a>
  115.           <a href="#" class="title"
  116.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  117.           >
  118.           <div class="desc">
  119.             <span class="price">￥39.9</span>
  120.             <span>200+人已购买</span>
  121.           </div>
  122.         </div>
  123.         <div class="item">
  124.           <a href="#">
  125.             <img src="images/33.png" alt="" />
  126.           </a>
  127.           <a href="#" class="title"
  128.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  129.           >
  130.           <div class="desc">
  131.             <span class="price">￥39.9</span>
  132.             <span>200+人已购买</span>
  133.           </div>
  134.         </div>
  135.         <div class="item">
  136.           <a href="#">
  137.             <img src="images/34.png" alt="" />
  138.           </a>
  139.           <a href="#" class="title"
  140.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  141.           >
  142.           <div class="desc">
  143.             <span class="price">￥39.9</span>
  144.             <span>200+人已购买</span>
  145.           </div>
  146.         </div>
  147.         <div class="item">
  148.           <a href="#">
  149.             <img src="images/35.png" alt="" />
  150.           </a>
  151.           <a href="#" class="title"
  152.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  153.           >
  154.           <div class="desc">
  155.             <span class="price">￥39.9</span>
  156.             <span>200+人已购买</span>
  157.           </div>
  158.         </div>
  159.         <div class="item">
  160.           <a href="#">
  161.             <img src="images/36.png" alt="" />
  162.           </a>
  163.           <a href="#" class="title"
  164.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  165.           >
  166.           <div class="desc">
  167.             <span class="price">￥39.9</span>
  168.             <span>200+人已购买</span>
  169.           </div>
  170.         </div>
  171.         <div class="item">
  172.           <a href="#">
  173.             <img src="images/34.png" alt="" />
  174.           </a>
  175.           <a href="#" class="title"
  176.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  177.           >
  178.           <div class="desc">
  179.             <span class="price">￥39.9</span>
  180.             <span>200+人已购买</span>
  181.           </div>
  182.         </div>
  183.         <div class="item">
  184.           <a href="#">
  185.             <img src="images/38.png" alt="" />
  186.           </a>
  187.           <a href="#" class="title"
  188.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  189.           >
  190.           <div class="desc">
  191.             <span class="price">￥39.9</span>
  192.             <span>200+人已购买</span>
  193.           </div>
  194.         </div>
  195.         <div class="item">
  196.           <a href="#">
  197.             <img src="images/36.png" alt="" />
  198.           </a>
  199.           <a href="#" class="title"
  200.             >外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边担任枕套</a
  201.           >
  202.           <div class="desc">
  203.             <span class="price">￥39.9</span>
  204.             <span>200+人已购买</span>
  205.           </div>
  206.         </div>
  207.       </div>
  208.     </main>
  209.     <footer>
  210.       <div class="bottom_icon">
  211.         <span class="iconfont icon-taobao"></span>
  212.       </div>
  213.       <div class="bottom_icon">
  214.         <span class="iconfont icon-gouwucheman"></span>
  215.         <span>购物车</span>
  216.       </div>
  217.       <div class="bottom_icon">
  218.         <span class="iconfont icon-wode"></span>
  219.         <span>我的淘宝</span>
  220.       </div>
  221.     </footer>
  222.   </body>

CSS代码

  1. /* 重置样式 */
  2. * {
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  7. html {
  8.   /* 设置根元素字号大小为100px，那么页面默认最终的字号大小为16px */
  9.   font-size: 100px;
  10. }
  11. body {
  12.   background-color: rgb(243, 245, 247);
  13.   /* 根据根元素html的字号大小来重置字号大小，方便布局 */
  14.   /* 默认：100px==>1px 最大：125px==>20px 最小：75px==>12px */
  15.   font-size: 0.16rem;
  16.   background-color: #f4f4f4;
  17.   /* padding: 0 0.1rem; */
  18. }
  19. /* 媒体查询，当设备宽度大于470px时，设置根元素字号大小为125px */
  20. @media (min-width: 470px) {
  21.   html {
  22.     /* 计算可得，页面最终字号大小为20px */
  23.     font-size: 125px;
  24.   }
  25. }
  26. /* 媒体查询，当设备宽度小于375px时，设置根元素字号大小为75px */
  27. @media (max-width: 375px) {
  28.   html {
  29.     /* 计算可得，页面最终字号大小为14px */
  30.     /* 12/16=0.75 */
  31.     /* 1rem = 100 * 0.75 = 75px  */
  32.     font-size: 75px;
  33.   }
  34. }
  35. li {
  36.   list-style: none;
  37. }
  38. a {
  39.   text-decoration: none;
  40.   color: #555;
  41. }
  43. /* 页眉顶部 */
  44. body header {
  45.   /* 声明弹性盒子 */
  46.   display: flex;
  47.   /* 两端对齐 */
  48.   place-content: space-between;
  49.   /* 所有项目在交叉轴上居中 */
  50.   place-items: center;
  51.   width: 100%;
  52.   height: 0.5rem;
  53.   background-color: #f4f4f4;
  54.   position: fixed;
  55.   z-index: 20;
  56.   margin-top: -0.5rem;
  57.   padding: 0.1rem;
  58. }
  59. body header .logo,
  60. body header .qiandao,
  61. body header .logo img {
  62.   /* 使用vw响应式布局 */
  63.   width: 15vw;
  64. }
  65. body header .qiandao img {
  66.   width: 8vw;
  67.   margin-left: 0.1rem;
  68. }
  69. /* 搜索*/
  70. body header .serch {
  71.   width: 60vw;
  72. }
  73. body header .serch input[type="serch"] {
  74.   width: 60vw;
  75.   height: 0.35rem;
  76.   border: 0.015rem solid #ff5000;
  77.   border-radius: 0.5rem;
  78.   padding-left: 0.08rem;
  79. }
  80. body header .serch .btn {
  81.   position: absolute;
  82.   margin-left: -0.8rem;
  83.   width: 0.7rem;
  84.   height: 0.3rem;
  85.   border-radius: 0.2rem;
  86.   margin-top: 0.025rem;
  87.   border: none;
  88.   color: #f4f4f4;
  89.   background-color: #ff8d0e;
  90. }
  91. body header .serch input {
  92.   outline: none;
  93. }
  94. body main {
  95.   width: 96%;
  96.   margin: auto;
  97. }
  98. /* 页面内容  顶部导航*/
  99. body main .topList {
  100.   background-color: white;
  101.   width: 100%;
  102.   height: 2rem;
  103.   margin-top: 0.5rem;
  104.   border-radius: 0.15rem;
  105.   /* 声明网格布局 */
  106.   display: grid;
  107.   /* 创建两行三列的表格 且行高和列宽自适应 */
  108.   grid-template-rows: repeat(2, 1fr);
  109.   grid-template-columns: repeat(5, 1fr);
  110.   /* 垂直和水平方向都居中对齐 */
  111.   place-items: center;
  112.   /* 加阴影 */
  113.   box-shadow: 0 0.01rem 0.03rem rgba(6, 6, 6, 0.2);
  114. }
  115. body main .topList .item {
  116.   width: 90%;
  117.   height: 90%;
  118.   /* background-color: aqua; */
  119. }
  121. body main .topList .item a img {
  122.   display: block;
  123.   width: 80%;
  124.   margin: auto;
  125. }
  126. body main .topList .item a:last-of-type {
  127.   font-size: 0.14rem;
  128.   color: #666;
  129.   display: block;
  130.   width: 80%;
  131.   margin: auto;
  132.   text-align: center;
  133. }
  135. /* 页面内容广告区 */
  136. body main .advList {
  137.   width: 100%;
  138.   height: 2.2rem;
  139.   margin-top: 0.1rem;
  140.   border-radius: 0.15rem;
  141.   background-image: url(../images/20.png);
  142.   background-size: 100% 100%;
  143.   display: grid;
  144.   grid-template-columns: repeat(2, 1fr);
  145.   grid-template-rows: repeat(2, 1fr);
  146.   place-items: center;
  147. }
  148. body main .advList:hover {
  149.   cursor: pointer;
  150. }
  151. body main .advList .item {
  152.   width: 95%;
  153.   height: 95%;
  154.   display: grid;
  155.   grid-template-columns: 50% 50%;
  156.   grid-template-rows: 0.3rem 1fr;
  157.   grid-auto-flow: column;
  158. }
  159. body main .advList {
  160.   padding: 0.05rem;
  161.   box-shadow: 0 0.01rem 0.03rem rgba(6, 6, 6, 0.2);
  162. }
  163. body main .advList .item .title {
  164.   width: 100%;
  165.   height: 0.4rem;
  166. }
  167. body main .advList .item .title span:first-of-type {
  168.   font-size: 0.2rem;
  169.   font-weight: bold;
  170. }
  171. body main .advList .item .title span:last-of-type {
  172.   font-size: 0.16rem;
  173.   position: absolute;
  174.   height: 0.2rem;
  175.   width: 0.7rem;
  176.   background-color: rgb(255, 66, 0);
  177.   margin-top: 0.02rem;
  178.   margin-left: 0.02rem;
  179.   text-align: center;
  180.   color: #f4f4f4;
  181. }
  182. body main .advList .item img:first-of-type {
  183.   width: 0.63rem;
  184.   height: 0.63rem;
  185.   margin: auto;
  186. }
  187. body main .advList .item img:last-of-type {
  188.   width: 80%;
  189.   grid-row: 1 / span 2;
  190.   place-self: center;
  191. }
  192. body main .advList .item:nth-of-type(3) .title span:last-of-type {
  193.   height: 0.2rem;
  194.   width: 0.6rem;
  195.   background-color: rgb(0, 144, 234);
  196. }
  197. body main .advList .item:last-of-type .title span:last-of-type {
  198.   height: 0.2rem;
  199.   width: 0.5rem;
  200.   background-color: rgb(255, 151, 17);
  201. }
  203. /* 产品列表区域 */
  204. body main .prodList {
  205.   margin-top: 0.1rem;
  206.   display: grid;
  207.   grid-template-columns: repeat(2, 48%);
  208.   /* 行间距/列间距 */
  209.   gap: 0 0.1rem;
  210.   grid-auto-rows: 3.2rem;
  211. }
  213. body main .prodList .item {
  214.   display: flex;
  215.   flex-direction: column;
  216.   border-radius: 0.05rem;
  217.   background-color: white;
  218.   place-content: space-between;
  219.   box-shadow: 0 0.01rem 0.05rem rgba(0, 0, 0, 0.4);
  220. }
  221. body main .prodList .item:first-of-type {
  222.   height: 3rem;
  223.   border-radius: 0.05rem;
  224.   margin-top: 0.1rem;
  225. }
  226. body main .prodList .item:nth-of-type(2n) {
  227.   margin-top: 0.1rem;
  228. }
  229. body main .prodList .item:nth-of-type(2n + 1):not(:first-of-type) {
  230.   height: 3.1rem;
  231. }
  233. body main .prodList .item:first-of-type img {
  234.   height: 100%;
  235.   border-radius: 0.05rem;
  236. }
  237. body main .prodList .item img {
  238.   width: 100%;
  239.   border-radius: 0.05rem 0.05rem 0 0;
  240. }
  241. body main .prodList .item .title,
  242. body main .prodList .item .desc {
  243.   width: 90%;
  244.   margin: auto;
  245.   color: #000;
  246. }
  247. body main .prodList .item .desc .price {
  248.   font-size: 00.16rem;
  249.   color: #ff5500;
  250. }
  251. body main .prodList .item .desc span:last-of-type {
  252.   font-size: 0.12rem;
  253.   color: #666;
  254. }
  256. body footer {
  257.   width: 100%;
  258.   height: 0.8rem;
  259.   background-color: white;
  260.   margin-top: 0.1rem;
  261.   display: flex;
  262.   place-content: space-evenly;
  263.   place-items: center;
  264. }
  265. /* body footer .bottom_icon{
  266.   width: 0.6rem;
  267.   height: 0.6rem;
  268. } */
  269. body footer .bottom_icon:first-of-type {
  270.   width: 0.8rem;
  271.   height: 0.8rem;
  272.   background-color: #ff5500;
  273.   border-radius: 0.8rem;
  274. }
  275. body footer .bottom_icon:first-of-type span:first-of-type {
  276.   font-size: 0.6rem;
  277.   display: block;
  278.   margin-top: 0.1rem;
  279.   margin-left: 0.1rem;
  280.   color: #f4f4f4;
  281. }
  282. body footer .bottom_icon:not(:first-of-type) {
  283.   display: grid;
  284.   /* font-size: 0.4rem; */
  285.   grid-template-rows: 0.5rem 0.2rem;
  286.   grid-auto-columns: 0.8rem;
  287.   place-items: center;
  288. }
  289. body footer .bottom_icon:not(:first-of-type) span:first-of-type {
  290.   font-size: 0.4rem;
  291.   color: #666;
  292. }
  293. body footer .bottom_icon:not(:first-of-type) span:last-of-type {
  294.   width: 0.8rem;
  295.   display: block;
  296.   text-align: center;
  297. }
上一条：仿php中文网部分下一条：模仿PHP中文网首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多