ASCII码 ASCII码

移动端布局思路与三种视口的关系 ,仿淘宝首页基本布局

发布于：2022-03-29 10:59:25  栏目：技术文档

移动端布局思路与三种视口的关系

  1. 三种视口
  2. 概念理解：
  3. 布局视图: 980px width
  4. 视觉视图: 375px device-width
  5. 修改布局视图: width = device-width, 布局视图等于视觉视图
  6. initial-scale=1.0, 初始化时,布局视图/视觉视图=1: 理想视图
  8. 页面设置
  9. 1. 布局视图 = 视觉视图: width = device-width
  10. 2. 理想视图 = 视觉视图: initial-scale=1.0
  12. 说明：
  13. px不能在移动端布局直接使用，因为px是固定值，移动端的显示效果和设置尺寸有关
  14. 主流解决方案使用: rem + vw
  15. 默认1rem = 16px
  16. 为了计算方便和布局， 通常将1rem = 100px
  18. 基础代码：
  19. html{
  20.    /* font-size: 100px; */
  21.    font-size: calc(100vw / 3.75);
  22.    /* 100px = 100px  */
  23. }
  24. body {
  25.  /* 在body中将font-size还原成浏览器默认值 12px , 否则后面的em就全错了 */
  26.  /* font-size: 12px; */
  27.  font-size: 0.12rem;
  28. }
  30. /* 限制一下手机上最小和最大的字号 */
  31. @media screen and (max-width: 320px) {
  32.   html{
  33.     font-size: 85px;
  34.   }
  35. }
  36. @media screen and (min-width: 640px) {
  37.   html{
  38.    font-size: 170px;
  39.   }
  40. }

仿淘宝首页基本布局

新加代码

  1. #头部，底部，基本按照老师的原样敲了一遍，里面有些自己的改动，去掉了内容的绝对定制，改成了一直用padding顶下来显示，下面是我自己新加的产品列表排版
  2. <!-- 产品列表 -->
  3.         <div class="plist">
  4.             <div class="plist_t"><img src="images/xihuan.png" /></div>
  5.             <div class="plist_c">
  6.                 <div>
  7.                     <a href="#">
  8.                         <img src="images/p_list.jpg" />
  9.                         <p>吃牛排的刀叉三件套西餐套装餐具刀勺全套两家用盘西餐具盘子儿童</p>
  10.                         <div><span>￥12.9</span><span>2000+人已购买</span></div>
  11.                     </a>
  12.                 </div>
  13.                 <div>
  14.                     <a href="#">
  15.                         <img src="images/p_list.jpg" />
  16.                         <p>吃牛排的刀叉三件套西餐套装餐具刀勺全套两家用盘西餐具盘子儿童</p>
  17.                         <div><span>￥12.9</span><span>2000+人已购买</span></div>
  18.                     </a>
  19.                 </div>
  20.                 <div>
  21.                     <a href="#">
  22.                         <img src="images/p_list.jpg" />
  23.                         <p>吃牛排的刀叉三件套西餐套装餐具刀勺全套两家用盘西餐具盘子儿童</p>
  24.                         <div><span>￥12.9</span><span>2000+人已购买</span></div>
  25.                     </a>
  26.                 </div>
  27.                 <div>
  28.                     <a href="#">
  29.                         <img src="images/p_list.jpg" />
  30.                         <p>吃牛排的刀叉三件套西餐套装餐具刀勺全套两家用盘西餐具盘子儿童</p>
  31.                         <div><span>￥12.9</span><span>2000+人已购买</span></div>
  32.                     </a>
  33.                 </div>
  34.             </div>
  35.         </div>
  37. css样式
  38. main {
  39.   padding-bottom: 0.5rem;
  40. }
  41. .plist {
  42.   padding: 0.2rem;
  43. }
  44. .plist_t {
  45.   text-align: center;
  46.   margin-bottom: 0.25rem;
  47. }
  48. .plist_t img {
  49.   width: 50%;
  50.   height: auto;
  51. }
  52. .plist_c {
  53.   display: grid;
  54.   grid-template-columns: repeat(2, 1fr);
  55.   gap: 0.1rem;
  56.   grid-auto-rows: auto;
  57. }
  58. .plist_c > div {
  59.   border-radius: 0.05rem;
  60.   background-color: #fff;
  61. }
  62. .plist_c img {
  63.   width: 100%;
  64.   height: 100%;
  65.   border-top-left-radius: 0.05rem;
  66.   border-top-right-radius: 0.05rem;
  67. }
  68. .plist_c > div > a > p {
  69.   margin: 0.06rem 0.1rem;
  70.   height: 0.32rem;
  71.   line-height: 0.16rem;
  72.   overflow: hidden;
  73. }
  74. .plist_c > div > a > div {
  75.   padding: 0 0.1rem 0.1rem;
  76. }
  77. .plist_c > div > a > div span:first-child {
  78.   color: red;
  79.   margin-right: 0.1rem;
  80. }

效果图

明天继续其它排版效果
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行