移动端

移动端

移动端开发概念

移动端开发

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

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

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

屏幕的基本概念

屏幕尺寸——英寸

英寸是一个长度单位，1英寸约等于2.54厘米。手机中的英寸是指手机屏幕对角线的长度为多少英寸，比如iPhone6的屏幕尺寸是4.7英寸，指iPhone6的屏幕对角线尺寸为4.7*2.54厘米。

像素

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

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

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

设备独立像素(逻辑像素)

独立于设备的用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素。每个手机的设备独立像素是不一样的，绝大多数手机的独立宽度为：360、375、390、411、414。设备独立像素就是移动端页面所参考的100%宽度。

设备独立像素比

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

视口

布局视口(layout viewport)

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

视觉视口(visual viewport)

布局视口是为了正常显示pc端页面而做的调整，但对于屏幕本身是无法以屏幕本身宽度来作为页面布局。而视觉视口是指以当前屏幕的宽度作为页面的布局方式。

不同的dpi会导致相同px的页面在不同的手机下会有空隙或者滚动条等。

理想视口(ideal viewport)

无论是什么品牌手机，或哪种分辨率，应当同样宽度的页面在不同的手机上都会呈现一样的效果，我们成为理想视口。每个手机的理想视口是以自己的设备独立像素作为自己页面的100%宽度。1csspx 在每个手机上的效果是一样的。

  • 开启理想视口模式：

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    • <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

  • 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%，父标签来控制宽度
posted @   AncilunKiang  阅读(557)  评论(0)  编辑  收藏  举报
相关博文：
· Bootstrap
· CSS布局
· 移动端适配的基础概念
· 移动端布局-移动web入门开发
· 关于移动端适配，你必须要知道的
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示