Community Learn Tools Library Leisure
search
English
Home > List of blog posts > vw+rem移动端布局原理
Blogger Information
Blog 48
fans 3
comment 1
visits 30382
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
vw+rem移动端布局原理
吴长清
Original
455 people have browsed it

移动端布局原理

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. }
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