移动端布局基本思路

  1. 修改布局视图等于视觉视图：width=device-width.
  2. 理想视图等于视觉视图（初始化时布局视图比视觉视图等于一）：initial-scale=1.0
  3. px不能使用，因为px与设备相关：用rem+vw实现自适应布局：font-size:cacl(100vw/3.75)

实战手机页面的基本整体架构

图片

demo

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>手机端首页基本架构</title>
  8. </head>
  9. <body>
  10.     <!-- 页眉 -->
  11.     <header>
  12.         <div class="top">页眉</div>
  14.     </header>
  15.     <!-- 主体 -->
  16.     <main>
  17.         <div class="navs" style="height: 1800px;">
  18.             主体888888888888888888888888888888888
  21.         </div>
  22.     </main>
  23.     <!-- 页脚 -->
  24.     <footer>
  25.         <div class="footer">页脚</div>
  26.     </footer>
  28. <style>
  29.     * {
  30.     margin: 0;
  31.     padding: 0;
  32.     box-sizing: border-box;
  33. }
  36. /* 链接 */
  38. a {
  39.     text-decoration: none;
  40.     color: #555;
  41. }
  44. /* 列表 */
  46. li {
  47.     list-style: none;
  48. }
  50. :root {
  51.     font-size: calc(100vw / 3.75);
  52. }
  54. body {
  55.     font-size: 0.12rem;
  56.     color: #333;
  57.     /* max-width: 750px;
  58.     min-width: 320px; */
  59.     margin: auto;
  60.     background-color: #f4f4f4;
  61. }
  62.         @media screen and (max-width:320px) {
  63.             :root{
  64.                 font-size: 85px;
  65.             }
  66.         }
  67.         @media screen and (min-width:640px) {
  68.             :root{
  69.                 font-size: 170px;
  70.             }
  71.         }
  72.         header .top{
  73.             width: 100vw;
  74.             position: fixed;
  75.             background-color: aqua;
  76.             top: 0;
  77.             left: 0;
  78.             right: 0;
  79.             z-index: 99;
  80.         }
  81.         footer .footer{
  82.             width: 100vw;
  84.             position: fixed;
  85.             background-color: aqua;
  86.             bottom: 0;
  87.             left: 0;
  88.             right: 0;
  89.             z-index: 99;
  90.         }
  91.         main .navs{
  92.             background-color: orangered;
  93.             position: absolute;
  94.             top: .16rem;
  95.             height:auto;
  96.         }
  97.     </style>
  98. </body>
  99. </html>

更多相关文章

  1. 移动端布局学习与 淘宝首页基本框架搭建
  2. 浅谈iOS开发如何适配暗黑模式（Dark Mode）
  3. iOS13适配的实现方法
  4. iOS实现文本分页的方法示例
  5. 移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。
  6. 移动端布局思路与三种视口的关系 ,仿淘宝首页基本布局
  7. Android最新支持包Design简介
  8. 初探Android(安卓)Scroll——scrollTo()与scrollBy()
  9. Android面试题07

随机推荐

  1. Android中如何查看内存(下)
  2. 在不同状态下使用两个图像切换按钮
  3. Android——PreferenceActivity简单使用
  4. 【Android实战】----Android Retrofit2.1
  5. Android在Service中弹出对话框(Dialog)，即
  6. Android中的内存储、外存储概念、文件操
  7. 作物形象与毕加索相一致。
  8. Android tabHost是不可见的？为什么不用这
  9. 一个ksoap2-android调用webService的封装
  10. Android 自定义控件 改变图片颜色来实现