23-移动端布局

移动端布局

什么是移动端？

• 主要是一些手持设备，最具有代表性就是手机和平板，比如智能手表，掌上游戏机等移动设备；

• 在前端开发中，移动端指的就是手机和ipad

• 在移动端上面运行项目，我们就称为移动端的项目

• 移动端主要关注点：各种类型移动设备（PC端关注点：各种浏览器）

移动端页面设计一般分为:

1. 响应式布局
   • 通过媒体查询技术实现不同屏幕都有良好的用户体验；一稿多端使用
2. 移动端布局
   • pc端和移动端的是相互的独立，pc端一套页面，移动端一套页面

移动端的学习：

第一阶段：移动端页面的设计和布局技巧

第二阶段：实现移动端的脚本设计

第三阶段：基于框架来进行移动端开发

第四阶段：学习移动端开发原理，app 和微信小程序

移动端布局应用场景？

• 例如：王者荣耀：https://pvp.qq.com/（PC端一套） https://pvp.qq.com/m/（移动端单独一套）
• 背景：因为不同的手机尺寸和屏幕像素差距越来越大，导致我们使用响应式布局很难保证所有主流的手机屏幕都可以100%适配。
• 概念：使用css3的单位以及弹性布局等技术来实现移动端布局。一般移动端布局和pc端布局不一样

了解屏幕尺寸单位：英寸

• 一般使用英寸来描述屏幕的物理大小。

• 1英寸=2.54cm（相当于大拇指指甲盖的大小）

  

像素

• 概念：即一个小方块，具有特定的位置和样式

分辨率（DPI）

• 概念：即每英寸包括的像素的数量，每英寸的点数
• 分辨率越高，每英寸包含点数越大，画面越清晰
• 物理分辨率：是屏幕一出厂已经确定的像素，屏幕上有多少个发光点
• 逻辑分辨率：真正用于显示屏幕内容的像素（移动端开发只需要参考它即可）
• 逻辑分辨率里面的一个像素，可以对应物理分辨率里面多个像素（发光点）

设置逻辑分辨率的作用？

一个像素对应多个屏幕发光点

• 常用的分辨率

  

视口（viewport）

• 概念：视口就是手机屏幕用于显示的页面的区域

布局视口（默认）

• 按照百分比来设计网页，在不同的屏幕下，显示的大小由屏幕决定的，但是在移动端，本身屏幕就小，如果显示pc端页面，可能会造成页