移动布局原理

1. 重要术语

(1) 术语

序号名称描述
1像素图像显示最小单位,PPI(像素分辨率)
2DPR设备像素比 = 设备像素 / CSS 像素
3视口可视窗口 viewport,分布局/视觉/理想三类

2. 三种视口描述

三种视口类型是人为的划分

序号名称描述
1布局视口Layout viewport设备无关, 通常默认980px,显示完整网页
2视觉视口visual viewport设备相关,用户手机屏幕可见部分,通过缩放查看全部
3理想视口idea viewport不必缩放就可查看全部,针对移动端进行布局

3. 解决方案

视口属性:<meta name="viewport" content="width=device-width, initial-scale=1.0" />

序号属性值描述
1width=device-width布局视图 = 视觉视图
2initial-scale=1.0视觉视图 = 理想视图

移动端布局单位很多,经典的百分比,em 等,但目前主流单位是: rem + vw,也称”rem-vw`解决方案

4. 推荐 vscode 插件

  1. 名称: px to rem & rpx,原名为cssrem
  2. 自动将px换算为rem
  3. 须在插件中设置1rem = ...px,默认为16px,通常设置为1rem=100px以方便计算

5. 操作步骤

布局前,必须先确定 1rem = ?, 1vw =?

5.1 1vw = ?

  1. 选择某款手机做为理想视口的基础,如iPhone11: 375px
  2. 100vw = 100% = 375px, 所以 1vw = 3.75px

5.2 1rem = ?

  1. 1rem 默认为游览器字号16px
  2. 推荐: 1rem = 100px
  3. 1rem不要在<html>中写死, 应该通过100vw计算出来

5.3 总结

序号属性值描述
11vw = 3.75px以iPhone6/11屏幕宽度为基准
21rem = 100vw / 3.75即1rem = 100px, 方便计算

实战手机页面的基本整体架构页眉,页脚,主体

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  10.     <link rel="stylesheet" href="css/reset.css" />
  11.     <link rel="stylesheet" href="css/header.css" />
  12.     <link rel="stylesheet" href="css/footer.css" />
  13.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3284190_nrlg22mwpjp.css">
  14. </head>
  16. <body>
  17.     <!-- 头部 -->
  18.     <header>
  19.         <!-- 顶部 -->
  20.         <div class="top">
  21.             <!-- logo -->
  22.             <div class="logo iconfont icon-shejiaotubiao-08"></div>
  23.             <!-- 搜索框 -->
  24.             <div class="search">
  25.                 <div class="keys">
  26.                     <span class="iconfont icon-fangdajing"></span>
  27.                     <span>寻找宝贝店铺</span>
  28.                 </div>
  29.             </div>
  30.         </div>
  31.         <!-- 轮播图 -->
  32.         <div class="slider">
  33.             <a href=""><img src="images/banner/banner1.jpg" alt="" /></a>
  34.         </div>
  35.         <!-- 导航组 -->
  36.         <ul class="nav">
  37.             <li class="item">
  38.                 <a href=""><img src="images/nav/nav6.png" alt="" /></a>
  39.                 <a href="">天猫新品</a>
  40.             </li>
  41.             <li class="item">
  42.                 <a href=""><img src="images/nav/nav3.png" alt="" /></a>
  43.                 <a href="">今日爆款</a>
  44.             </li>
  45.             <li class="item">
  46.                 <a href=""><img src="images/nav/nav1.png" alt="" /></a>
  47.                 <a href="">天猫超市</a>
  48.             </li>
  49.             <li class="item">
  50.                 <a href=""><img src="images/nav/nav2.png" alt="" /></a>
  51.                 <a href="">充值中心</a>
  52.             </li>
  53.             <li class="item">
  54.                 <a href=""><img src="images/nav/nav5.png" alt="" /></a>
  55.                 <a href="">机票酒店</a>
  56.             </li>
  57.             <li class="item">
  58.                 <a href=""><img src="images/nav/nav8.png" alt="" /></a>
  59.                 <a href="">金币庄园</a>
  60.             </li>
  61.             <li class="item">
  62.                 <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  63.                 <a href="">阿里拍卖</a>
  64.             </li>
  65.             <li class="item">
  66.                 <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  67.                 <a href="">分类</a>
  68.             </li>
  69.             <li class="item">
  70.                 <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  71.                 <a href="">阿里拍卖</a>
  72.             </li>
  73.             <li class="item">
  74.                 <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  75.                 <a href="">分类</a>
  76.             </li>
  77.         </ul>
  78.     </header>
  81.     <!-- 主体 -->
  82.     <main style="height: 1600px" ">
  83. <div class="main-courses"><h3>天猫超市</h3>
  84.     <div>
  86.         <ul class="main-courses">
  87.             <li class="item">
  88.               <a href=""><img src="static/images/man/1.webp" alt="" /></a>
  89.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  90.               <div class="price">
  91.                 <div class="iconfont icon-rmb">15838</div>
  94.               </div>
  95.             </li>
  96.             <li class="item">
  97.               <a href=""><img src="static/images/man/2.webp" alt="" /></a>
  98.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  99.               </p>
  100.               <div class="price">
  101.                 <div class="iconfont icon-rmb">203</div>
  104.               </div>
  105.             </li>
  106.             <li class="item">
  107.               <a href=""><img src="static/images/man/3.webp" alt="" /></a>
  108.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  109.               <div class="price">
  110.                 <div class="iconfont icon-rmb">203</div>
  113.               </div>
  114.             </li>
  115.             <li class="item">
  116.               <a href=""><img src="static/images/man/4.webp" alt="" /></a>
  117.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  118.               <div class="price">
  119.                 <div class="iconfont icon-rmb">203</div>
  122.               </div>
  123.             </li>
  124.             <li class="item">
  125.               <a href=""><img src="static/images/man/5.webp" alt="" /></a>
  126.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  127.               <div class="price">
  128.                 <div class="iconfont icon-rmb">203</div>
  131.               </div>
  132.             </li>
  134.           </ul>
  135.     </div>
  136. </div>
  138.               </main>
  141.     <!-- 底部 -->
  142.     <footer>
  143.         <div class="item active">
  144.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  145.         </div>
  146.         <div class="item">
  147.             <a href="" class="iconfont icon-gouwuche"></a>
  148.             <a href="">购物车</a>
  149.         </div>
  150.         <div class="item">
  151.             <a href="" class="iconfont icon-wodetaobao"></a>
  152.             <a href="">我的淘宝</a>
  153.         </div>
  154.     </footer>
  155. </body>
  157. </html>

更多相关文章

  1. Android介绍
  2. Android硬件抽象层（HAL）概要介绍和学习计划
  3. android WebView加载html5介绍
  4. android开发笔记之2012版辅助开发工具包（ADT）新功能特性介绍及安装
  5. 2012版辅助开发工具包（ADT）新功能特性介绍及安装使用
  6. Android的多媒体框架OpenCore（PacketVideo）介绍
  7. PHP文件操作简单介绍及函数汇总
  8. Android线性LinearLayout布局xml属性介绍
  9. 新建android project和其配置文件的基本介绍

随机推荐

  1. android build （可参考之建立android编译
  2. android 获取短信验证码倒计时
  3. Android通过JNI操作串口《一》
  4. android 数据存取——SharedPreferences
  5. Android NavigationView 侧滑菜单
  6. Gradle:Basic Project
  7. Android获取默认浏览器信息
  8. Android Wear Preview - Get Started Wit
  9. Android 本地推送消息到通知栏 Notificat
  10. Mono登录界面记住密码的控件