移动端

移动端开发概念

移动端开发

  • 区别于传统的页面开发，移动端开发是指利用移动设备的特性以及css3提供的各种相对单位来实现移动端页面布局开发。
  • 移动设备是指便携的移动电子设备。包括手机、平板、小屏幕电脑等。

为什么不直接使用响应式布局

  • 布局不匹配：pc端一般屏幕较大，可以显示更多的东西，而移动设备屏幕空间有限，只能显示部分内容。
  • 代码量太大：针对pc、移动端会写不同版本的css。

屏幕的基本概念

屏幕的尺寸-英寸

  • 英寸是一个长度单位，1英寸约等于2.54厘米。
  • 手机中的英寸是指手机屏幕对角线的长度为多少英寸。比如iPhone6的屏幕尺寸是4.7英寸，指iPhone6的屏幕对角线尺寸为4.7*2.54厘米
  • 屏幕尺寸大全：https://uiiiuiii.com/screen/

像素

  • 是指屏幕上最小的一个方块，每个方块可以存放一种颜色。无数个像素的结合就可以形成图像
  • 平时所说的分辨率就是指屏幕上有多少个小方块(像素)

设备物理像素(手机分辨率)

  • 比如说iPhone6的物理分辨率是750 x 1334.指的是iPhone6屏幕水平方向上有750个发光点，每个发光点可以作为一个像素。垂直上有1334个发光点(小方块)
  • 设备物理像素是固定的，只有这么多像素。

设备独立像素(在pc上又称逻辑像素)-dp

  • 指为了保证无论手机物理分辨率有多大，为了保证页面的效果得到统一展示，那么每个手机都有自己的设备独立像素。无论哪个手机每一个独立像素可以认为是一个css像素
  • 每个手机的设备独立像素多少是不一样的。比如iphone6、7、8独立像素都是375_ 667 ,像iPhone 12 pro 就是390_844
  • 绝大多数手机的独立宽度为：360 375 390 411 414
  • 设备独立像素就是移动端页面所参考的100%宽度

dpi

  • 设备独立像素比：指手机的独立像素和物理分辨率的比值。每个手机的dpi是固定的。比如iPhone 12 Pro Max的独立像素是428*926，手机物理分辨率是 1284 x 2778,dpi就是3.0.

视口(viewport)

布局视口

  • 因为手机一般的屏幕较小，分辨率不同。为了正常显示所有的页面，包括pc端，所以移动端针对浏览器页面有个默认的页面宽度。大多数的手机浏览器页面默认宽度为980px，有的是1024px。我们称默认的移动端浏览器页面展示模式为布局视口(layout viewport)

视觉视口(visual viewport)

  • 布局视口是为了正常显示pc端页面而做 的调整，但对于屏幕本身是无法以屏幕本身宽度来作为页面布局。而视觉视口是指以当前屏幕的宽度作为页面的布局方式。
  • 不同的dpi会导致相同px的页面在不同的手机下会有空隙或者滚动条等。

理想视口(ideal viewport)

  • 无论是什么品牌手机，或哪种分辨率，应当同样宽度的页面在不同的手机上都会呈现一样的效果。我们成为理想视口
  • 每个手机的理想视口是以自己的设备独立像素作为自己页面的100%宽度。1csspx 在每个手机上的效果是一样的。
  • 开启理想视口模式
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>

  • 处于理想视口模式下。同样的页面内容，在不同的手机上效果是一致的，唯一需要兼容处理的就是每个手机的设备独立像素不一样。

    • 绝大多数手机的设备独立像素为：360 375 390 411 414 768 1024

  • <meta>是在<head>中用于完成页面配置的标签。可以配置不同的设置，比如字符编码，设置移动端视口模式等。

    • name:表示要设置的配置项名称。比如name=viewprot表示设置移动端视口模式，name=keywords表示设置页面关键字
    • content:设置项的具体配置信息
  • width=device-width:即页面宽度采取设备的独立像素，即width:100%== 设备的独立像素
  • initial-scale=1.0:缩放比例为1.0，缩放比例也是参考了设备独立像素
  • user-scalable:是否允许用户缩放页面，取值为yes或no

移动端使用的像素单位

em rem

  • em:1em相当于父标签的font-size大小。比如父标签的font-size为14px,那么1em等于14px，2em=28px

    • 父标签没有font-size，继续往上找font-size。如果祖先标签都没有设置font-size，会参考浏览器的font-size，大多数默认16px
  • rem: rem是只想对于<html>标签的font-size， 不会被父标签的font-size所影响。即如果<html>的font-size为30px，那么页面上的所有后代标签设置1rem==30px.

vw、vh(viewport-width \height)

  • vw:css3提供的单位，1vw即视口宽度的1%。100vw即100%视口宽度。
  • vh:css3提供的单位，1vh即视口高度的1%。100vh即100%视口高度。
  • 在理想视口下，视口宽度或高度就是浏览器的宽度以及可视区域的高度

px：绝对单位

  • 为了保证页面的效果在不同手机下效果是一样的话，需要使用理想视口

移动端布局技巧

页面布局(针对移动端)

  • 必须采用理想视口
  • 建议页面整体尺寸采取rem
  • 对于列表之类可以使用弹性布局(推荐)
  • 文字也是用rem来设置

屏幕适配

  • 主要适配以下的设备独立性像素(理想的视口宽度)

    • 360 375 390 411 414 768 1024

  • 适配方案：根据不同屏幕宽度来设置<html>不同的font-size

    • 使用媒体查询
    • 利用js来动态监测屏幕宽度，来计算得到合适的font-size

关于图像

  • 小图标尽量用字体图标
  • 背景图片可以background-size用rem
  • 一般img标签是设置100%，父标签来控制宽度