适配移动端解决思路

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

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.5
      50 = 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的编写同方法二

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页