移动端布局方案

什么是移动端

移动终端或者叫移动通信终端 是指可以在移动中使用的计算机设备
广义的讲包括手机、笔记本、平板电脑、POS机甚至包括车载电脑
设计 app 原型图  ==>  根据原型图 实现页面布局 （移动端页面）

移动端页面

查看移动端页面： 浏览器页面打开 鼠标右击 检查  ==> 单击 左上方第二个按钮

移动端布局模拟器

iphone 6/7/8		===>  手机型号
375*667    			===>  手机屏幕的分辨率
75%					===>  理解为：最佳观看比例
旋转小图标			 ===>  点击时切换横屏和竖屏
最右边的三个圆点	   ===>  能够获取“手机”信息

移动端准备工作

meta 标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

几个参数解释：
    width = device-width：宽度等于当前设备的宽度
    initial-scale：初始的缩放比例（默认设置为1.0）
    minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
    maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
    user-scalable：用户是否可以手动缩放
        （默认设置为no，因为我们不希望用户放大缩小页面）

设备像素比

设备像素比（Device Pixel Ratio, DPR）：其实指的是 window.devicePixelRatio,
被所有WebKit浏览器以及Opera所支持，一个设备的物理像素与逻辑像素之比

物理像素/设备像素：就是手机生产时会有多少物理像素点
逻辑像素/css像素：css样式代码中使用的像素

以ipone6为例子，设备的宽高为375*667,有750*1334个物理像素颗粒, dpr = 2 (常说的二倍图)

UI设计师按照手机物理像素出设计稿，切图时根据其设备像素比来换算设备独立像素（CSS像素）
比如 手机iPhone6，物理像素 750px × 1334px，由于其设备像素比为2
CSS切图时需要将设计稿的所有尺寸除以2，才是正确CSS像素值

iPhone

普通屏幕 VS Retina 屏

是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度
拥有的物理像素点数比非高清屏多4倍甚至更多
如果还按照DPR=1进行展示，那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4
这样的话由于图片在屏幕上的展示面积大大缩小，也会导致出现“看不清”的问题

普通屏幕：css像素：物理像素 = 1:1
retina屏：css像素：物理像素 = 1:4

媒体查询

    媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果

实际操作为：
    对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，
    如果表达式结果为假，媒体查询内的CSS将被忽略
基本语法：
    @media not|only mediatype and (mediafeature and|or|not mediafeature) {
  		CSS-Code;
    }
    
    not | only | and 关键词
    not：not 关键字反正整个媒体查询的含义。
    only：only 关键字可防止旧版浏览器应用指定的样式
    这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响
    and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起

    它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型

设备类型
https://www.w3school.com.cn/cssref/pr_mediaquery.asp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
实例代码：
			@media only screen and (max-width: 320px) {
				html {
					font-size: 12px;
				}
			}
			
			@media only screen and (min-width: 321px) and (max-width: 375px) {
				html {
					font-size: 14px;
				}
			}
			
			@media only screen and (min-width:376px ) {
				html {
					font-size: 16px;
				}
			}
	
			竖屏：
				@media screen and (orientation:portrait) {对应样式}
			横屏：
				@media screen and (orientation:landscape) {对应样式}

iphone5:320px
iphone6/7/8:375px
iphone6/7/8plus:414px

常见尺寸图

rem 单位

什么是rem?
    rem（font size of the root element）是指相对于根元素的字体大小的单位
    简单的说它就是一个相对单位
    看到rem大家一定会想起 em 单位，em（font size of the element）是指相对于父元素的字体大小的单位
    它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算

面试题：px, em, rem 三者有什么区别？
    px是固定的像素，一旦设置了就无法因为适应页面大小而改变，一般用于元素的边框或者定位
    em 和 rem 相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局
    em 相对于父元素，rem 相对于根元素

rem布局原理
    拿到设计稿，按照设计稿的宽去设置一个合适的rem ,
    配合js查询屏幕大小来改变html的font-size，从而达到适配各种屏幕的效果

移动端布局方案

​