移动Web-01-移动端布局特点介绍

1.移动端网页与PC端网页区别

• (1)多机型适配

  • pc端布局无需考虑机型适配，
  • 移动设备(手机,平板)机型尺寸种类特别多，需要考虑不同的机型尺寸适配

• (2)页面结构简单

  • 相比而言，由于移动设备的屏幕远小于PC端的屏幕，所以移动Web的页面结构比PC端简单
  • 手机性能有限，所以网页一般不会做的太复杂
    • 常见的移动Web页面结构(从上往下)：广告栏banner、搜索栏、轮播图、导航栏、商品列表、底部tabbar

2.移动Web布局核心思想

• 1.不允许网页出现横向滚动
  • 移动端一般只适配宽度盛满整个屏幕，高度从上往下滚动
    • pc端布局一般都是使用固定宽度，水平居中且两边留白的方式来布局，所以pc端不用考虑显示屏的宽度，而移动端布局是采用全屏的方式布局，既然是全屏，就要考虑屏幕的适配，因为不同的手机的屏幕宽度是不一样的
• 2.页面盛满屏幕，盒子宽度与屏幕一致 100%
• 3.让盒子的内容宽高width/height包含padding与border，避免出现横向滚动条
• 3.移动Web布局方式介绍

  • (1)流式布局(百分比布局)

    • px不写死，使用%百分比实现比例布局

  • (2)flex伸缩布局(弹性布局)

  • (3)rem布局

    • 以html元素字体大小作为单位. 1rem = html字体大小

  • (4)响应式布局

    每种布局方式没有优劣之分，只是各自特点不同，所适用的场景不同而已