适配移动端解决思路

阅读本文前，先了解一篇文章 移动端视口

1.适配移动端方法一：PC+ 移动端使用媒体查询

PC端，移动端使用媒体查询，使用同一套代码
html头部添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
内容区域：
采用媒体查询的方式布局页面。主要是通过查询设备的宽度来执行不同的css代码，最终达到界面的配置

 @media screen and (min-width: 414px){
         /*iphone6/7/8*/
         }
 @media screen and (min-width: 375px){
		 /*iphone6/7/8plus*/
      }

媒体查询优势
简单, 哪里不对改哪里
调整屏幕宽度的时候不用刷新页面即可响应式展示
特别适合对移动短和PC维护同一套代码的时候
问题：
由于移动端和PC端维护同一套代码, 所以代码量比较大，维护不方便
为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源(大图，小图都要写在html中。用户都要下载)
为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

应用场景
对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等
我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点

对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等
更多的则是PC端一套代码, 移动端一套代码（如：京东，淘宝）

如何实现PC端一套代码,移动端一套代码,（界面自动跳转：域名不同）
在PC端打开自动打开PC端界面
在移动端打开自动打开移动端界面

实现步骤:
1、默认打开PC端界面
2、在PC端界面中通过BOM拿到当前浏览器信息（navigator.userAgent）
3、通过正则判断当前浏览器是否是移动端浏览器
4、通过BOM的location对象实现跳转到移动端界面

2.适配移动端方法二：移动端使用媒体查询 + rem

解决媒体查询中所有元素需要根据不同设备重复编写，
当下在企业开发中设计师提供给我们的移动端设计图片是750xxx的或者1125xxx的，
所以我们需要对设计师提供的图片进行等比缩放, 这样才能1:1还原设计图片的问题

• 如何等比缩放?

  • 将设计图片等分为指定份数,求出每一份的大小
    例如: 750设计图片分为7.5份, 那么每一份的大小就是100px

  • 将目标屏幕也等分为指定份数,求出每一份的大小
    例如: 375屏幕也分为7.5份, 那么每一份的大小就是50px

  • 用 原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸
    例如: 设计图片上有一个150150的图片, 我想等比缩放显示到375屏幕上
    那么: 150 / 100 * 50 = 1.550 = 75px

• .如何在前端开发中应用这个计算公式?

  • 目标屏幕每一份的大小就是html的font-size: 50px
  • 使用时只需要用 “原始元素尺寸 / 原始图片每一份大rem” 即可
    150 / 100 = 1.5 / 1.5rem
    1rem = 50px / 1.5rem === 1.5*50 = 75px

rem：前端开发常用单位

 @media screen and (max-width: 320px){
            /*
            原始图片750。一份一百，分7.5份
            iphone5：目标屏幕320,7.5份，一份42.67
            */
            html{
                font-size: 42.67px;/*1rem=42.67*/
            }
        }
@media screen and (min-width: 375px){
            /*
            原始图片750。一份一百，分7.5份
            iphone6：目标屏幕375, 7.5份，一份50
            */
            html{
                font-size: 50px;/*1rem=50*/
            }
        }
.top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top:0.8rem;/*80/100元素大小/原始图片每份大小*目标屏幕每份大小*/
            font-size: 0.36rem;/*36/100*/
            color: #fff;
        }

3.适配移动端方法三：移动端使用js + rem

解决上百设备，每个设备都要使用媒体查询计算设备每份大小的问题。
解决方案：使用js获取设备宽度
document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
css的编写同方法二

4.适配移动端方法四：移动端使用js + rem

解决设备像素同css像素不同的问题。设备（物理）像素和CSS（逻辑）像素

let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scaleable=no">`;
 document.write(text);
 document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";//可视区域一份的大小

css的编写同方法二