移动端常用的几种适配方案

已于 2022-04-16 23:34:04 修改
阅读量961 收藏 6
点赞数 1
分类专栏： Web移动端、响应式布局 文章标签： 移动端
于 2021-09-29 16:04:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/120549126
版权

目录

一、媒体查询

1.1 媒体查询的优劣势

1.2 媒体查询的应用场景

二、媒体查询+rem

2.1 如何进行等比缩放?

2.2 如何在前端开发中应用等比缩放这个计算公式?

2.3 应用实例

三、JS动态计算当前屏幕每一份大小（推荐）

四、JS动态计算当前屏幕每一份大小以及考虑像素（推荐）

4.1 什么是设备像素和CSS像素? 

4.2 设备像素和CSS像素什么时候不一样?

4.3 如何解决设备像素和CSS像素不一样的问题?

4.4 如何缩小?

一、媒体查询

1.1 媒体查询的优劣势

优势：

简单、哪里不对改哪里

调整屏幕宽度时不用刷新页面即可响应式展示

特别适合对移动端和PC端维护同一套代码的时候

劣势：

由于移动端和PC端共同使用同一套代码，因此代码量较大、维护不方便

为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源的时候

为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

1.2 媒体查询的应用场景

对于比较简单（页面不复杂）的网页，诸如：企业官网、宣传单页等，我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式特点

对于比较复杂（界面复杂）的网页，诸如：电商、团购等，更多的是PC端一套代码，移动端一套代码

示例：

        * {
            margin: 0;
            padding: 0;
        }
        
        .top {
            position: relative;
        }
        
        .top>img {
            width: 100%;
            height: auto;
        }
        
        .top>p {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 33px;
            font-size: 16px;
            color: #fff;
        }
        
        .middle,
        .bottom {
            position: relative;
            height: 124px;
        }
        
        .main {
            border: 1px dashed #0d7efb;
            border-radius: 5px;
            padding: 4px;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .main>img:nth-of-type(1) {
            width: 175px;
            height: 116px;
            vertical-align: bottom;
        }
        
        .main>img:nth-of-type(2) {
            width: 35px;
            height: 35px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 25px;
        }
        
        .bottom {
            margin-top: 14px;
        }
        
        @media screen and (min-width:375px) {
            .top>p {
                font-size: 18px;
                top: 40px;
            }
            .middle,
            .bottom {
                height: 143px;
            }
            .bottom {
                top: 17px;
            }
            .main>img:nth-of-type(1) {
                width: 206px;
                height: 135px;
            }
            .main>img:nth-of-type(2) {
                width: 42px;
                height: 42px;
                top: 30px;
            }
        }
        
        @media screen and (min-width:414px) {
            .top>p {
                font-size: 20px;
                top: 43px;
            }
            .middle,
            .bottom {
                height: 160px;
                padding: 5px;
            }
            .bottom {
                top: 19px;
            }
            .main>img:nth-of-type(1) {
                width: 227px;
                height: 150px;
            }
            .main>img:nth-of-type(2) {
                width: 45px;
                height: 45px;
                top: 35px;
            }
        }
    <div class="top">
        <img src="./img/bg.png" alt="">
        <p>实名验证</p>
    </div>
    <div class="middle">
        <div class="main">
            <img src="./img/back.png" alt="">
            <img src="./img/add.png" alt="">
        </div>
    </div>
    <div class="bottom">
        <div class="main">
            <img src="./img/back.png" alt="">
            <img src="./img/add.png" alt="">
        </div>
    </div>

iphone6/7/8

iphone6/7/8plus

 

补充：判断是PC端还是移动端


        // 声明浏览器用于 HTTP 请求的用户代理头的值。
        // let userAgentInfo = navigator.userAgent;
        // console.log(userAgentInfo);

        function isPc() {
            let userAgentInfo = navigator.userAgent;
            //判断是不是移动ios端
            if (/iphone/i.test(userAgentInfo)) {
                return false;
            }
            // 判断是不是移动android端 
            else if (/android/i.test(userAgentInfo)) {
                return false;
            }
            // 否则就是PC端
            return true;
        }
        // console.log(isPc());

        if (!isPc()) {
            location.href = "http://m.jd.com";
        }

二、媒体查询+rem

2.1 如何进行等比缩放?

  •     将设计图片等分为指定份数,求出每一份的大小

       例如: 750设计图片分为7.5份, 那么每一份的大小就是100px

  •    将目标屏幕也等分为指定份数,求出每一份的大小

       例如: 375屏幕也分为7.5份, 那么每一份的大小就是50px

  •     用原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸

       例如: 设计图片上有一个150*150的图片, 我想等比缩放显示到375屏幕上

       那么: 150 / 100 * 50 = 1.5*50 = 75px

2.2 如何在前端开发中应用等比缩放这个计算公式?

  • 目标屏幕每一份的大小就是html的font-size: 50px
  • 使用时只需要用 "原始元素尺寸 / 原始图片每一份大小rem" 即可

                      150 / 100 = 1.5 / 1.5rem

                      1rem = 50px  / 1.5rem === 1.5*50 = 75px

2.3 应用实例

  1. 网易新闻：

        750/100=7.5

        375/7.5=50;

        320/7.5=42.7;

        2.苏宁易购

        750/50=15

        375/15=25

        320/15=21.33

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端常用适配方案二</title>
    <style type="text/less">
        * {
            margin: 0;
            padding: 0;
        }
        
        @media screen and (max-width: 320px) {
            /* 750 / 7.5 = 100 320 / 7.5 = 42.67 iphone5: */
            html {
                font-size: 42.67px;
            }
        }
        
        @media screen and (min-width: 375px) {
            /* 750 / 7.5 = 100 375 / 7.5 = 50 iphone6: */
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 414px) {
            /* 750 / 7.5 = 100 414 / 7.5 = 50 iphone6Plus: */
            html {
                font-size: 55.2px;
            }
        }
        
        .top {
            position: relative;
        }
        
        .top>img {
            width: 100%;
            height: auto;
        }
        
        .top>p {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: #fff;
        }
        
        .middle,
        .bottom {
            position: relative;
            height: 290/100rem;
        }
        
        .main {
            border: 1px dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .main>img:nth-of-type(1) {
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }
        
        .main>img:nth-of-type(2) {
            width: 84/100rem;
            height: 84/100rem;
            vertical-align: bottom;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
        
        .bottom {
            margin-top: 35/100rem;
        }
    </style>
    <script src="js/less.js"></script>
</head>

<body>
    <div class="top">
        <img src="images/bg.png" alt="">
        <p>实名认证</p>
    </div>

    <div class="middle">
        <div class="main">
            <img src="images/back.png" alt="">
            <img src="images/add.png" alt="">
        </div>
    </div>

    <div class="bottom">
        <div class="main">
            <img src="images/back.png" alt="">
            <img src="images/add.png" alt="">
        </div>
    </div>

</body>

</html>

 

三、JS动态计算当前屏幕每一份大小（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-移动端常用适配方案三</title>
    <script>
        /*
        注意点: 通过JS动态计算当前屏幕每一份大小的好处: 不用写很多的媒体查询
                坏处: 切换了屏幕尺寸之后需要刷新界面才有效
                      而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面
        * */
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        /*
        1.计算设计图片每一份大小: 750 / 7.5 = 100px
        2.计算当前屏幕每一份大小: 当前屏幕宽度 / 和设计图相同的分数 = 当前屏幕每一份大小
        */
        
        .top{
            position: relative;
        }
        .top>img{
            width: 100%;
            height: auto;
        }
        .top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: #fff;
        }
        .middle, .bottom{
            position: relative;
            height: 290/100rem;
        }
        .main{
            border: 1px dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .main>img:nth-of-type(1){
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }
        .main>img:nth-of-type(2){
            width: 84/100rem;
            height: 84/100rem;
            vertical-align: bottom;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
        .bottom{
            margin-top: 35/100rem;
        }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="top">
    <img src="images/bg.png" alt="">
    <p>实名认证</p>
</div>

<div class="middle">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

<div class="bottom">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

</body>
</html>

四、JS动态计算当前屏幕每一份大小以及考虑像素（推荐）

4.1 什么是设备像素和CSS像素? 

  • 设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变
  • CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素

例如: 

iPhone3G/iPhone3GS   3.5英寸/ 逻辑像素320*480 / 设备像素320*480

iPhone4/4S                    3.5英寸/ 逻辑像素320*480 / 设备像素640*960

 也就是说CSS像素和设备像素在有的时候是不一样的

4.2 设备像素和CSS像素什么时候不一样?

在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素,所以我们无需关心PC端的CSS像素和设备像素

在手机端，最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素,但是后来一个改变世界的男人(乔布斯)改变了这一切~

    从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。

    iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍

这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素，而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素，所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些

参考资料：

https://segmentfault.com/a/1190000015736900

https://ask.csdn.net/questions/692608


4.3 如何解决设备像素和CSS像素不一样的问题?

如果设备像素和CSS像素一样, 那么无需处理不会带来任何负面影响
如果设备像素是CSS像素的2倍, 那么我们只需将CSS像素缩小一半即可
但是有时候设备像素可能是CSS像素的3倍/4倍...

获取设备像素比DPR(Device Pixel Ratio)
        DPR = 设备像素 / CSS像素
        iPhone3GS :  320 / 320 = 1
        iPhone4S:    640 / 320 = 2
        iPhone678:   750 / 375 = 2
        iPhoneX:     1125 / 375 = 3
在JS中我们可以通过 window.devicePixelRatio 获取当前的设备像素

4.4 如何缩小?

通过 <meta name="viewport">的initial-scale属性来缩小
注意点: 缩放视口后视口大小会发生变化
       

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端常用适配方案四</title>
    <script>
        // console.log(1.0 / window.devicePixelRatio); // 1 / 1 = 1;  1 / 2 = 0.5;
        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-scalable=no">`;
        document.write(text);

        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            position: relative;
        }
        .top>img{
            width: 100%;
            height: auto;
        }
        .top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: #fff;
        }
        .middle, .bottom{
            position: relative;
            height: 290/100rem;
        }
        .main{
            border: 1px dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .main>img:nth-of-type(1){
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }
        .main>img:nth-of-type(2){
            width: 84/100rem;
            height: 84/100rem;
            vertical-align: bottom;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
        .bottom{
            margin-top: 35/100rem;
        }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="top">
    <img src="images/bg.png" alt="">
    <p>实名认证</p>
</div>

<div class="middle">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

<div class="bottom">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

</body>
</html>

小白小白从不日白
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端解决移动端适配的五种方法
weixin_37632943的博客
07-11 3万+
移动端适配的五种方法 所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示 第一种方法：viewport适配 原理：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度. //获取meta节点 var metaNode = document.querySelector('meta[name=viewport]'); //定义设计稿宽度为375 var des...
移动端几种适配方法
weixin_51962708的博客
10-23 1752
百分比适配方式 这种方法，只是宽度能适配，高度不能适配，只能设置某个高度固定死 需求：是四个div高度为100px，宽度等宽横向排列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,u
移动端适配方式
最新发布
wsq_5211314
05-19 1019
自适应：根据不同的设备屏幕大小来自动调整尺寸、大小响应式：会随着屏幕的实时变动而自动调整，是一种更强的自适应。
移动端适配方案
syt_1013的博客
11-03 3595
移动端适配
移动端适配的理解和各种方案解析(详解)
weixin_57677300的博客
02-24 7203
自适应：根据不同的设备屏幕大小来自动调整尺寸，大小。响应式：会随着屏幕的实时变动而自动调整，是一种自适应。
2021.10.13 五种移动端前端适配方案【移动端】
一只白猫罢了
10-13 4976
四种移动端前端适配方案： 通过媒体查询的方式即CSS3的meida queries 以天猫首页为代表的 flex 弹性布局 以淘宝首页为代表的 rem+viewport缩放 rem 方式 1. media queries 实现原理 meida queries 主要是通过查询设备的宽度 来执行不同的 css 代码。 @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ } 优缺点 2. F
移动端如何适配不同的屏幕尺寸
qq_25741071的博客
08-30 1515
使用JavaScript库：例如，使用Bootstrap或Foundation等前端框架，它们提供了一些内置的响应式布局和组件，可以帮助您更轻松地实现移动端适配。使用响应式布局：使用CSS媒体查询和弹性布局来根据屏幕尺寸调整页面布局和元素大小。使用CSS Flexbox或Grid布局：这些布局技术可以帮助您更轻松地创建自适应的布局，使元素在不同屏幕尺寸下自动调整位置和大小。规则，可以根据不同的屏幕尺寸应用不同的CSS样式。您可以根据需要设置不同的断点，并在不同的屏幕尺寸下应用不同的样式。
flexible.js实现移动端rem适配方案
10-15
【flexible.js 实现移动端rem适配方案】 在移动设备上开发网页时，为了实现不同分辨率屏幕间的适配，开发者通常会使用响应式设计。其中，rem（root em）单位是一种常用的解决方案，它允许我们将元素的尺寸相对于根...
1000个网页常用小图标
04-21
这个资源包包含了1000个GIF格式的小图标，GIF是一种支持动画和透明度的图像格式，尤其适合用于网页上的交互元素，如按钮、指示器或动态效果。GIF的文件大小通常相对较小，这使得它在网页加载速度方面具有优势，对于...
layui手机车牌号码键盘代码
04-25
"layui手机车牌号码键盘代码" 提供了一种解决方案，它利用jQuery和layui框架来创建一个专用于手机端的车牌号码输入键盘。这个键盘能够方便用户在小屏幕上便捷地输入车牌号码，尤其是对于新能源汽车的特殊格式。 ...
纯色漂亮的宠物猫企业网站模板5356.zip
08-16
2. **纯色设计**：这种设计风格通常使用一种或几种相近的颜色，给人简洁、一致的视觉效果，有助于品牌形象的塑造。 3. **宠物猫主题**：针对宠物猫相关业务的网站，模板将包含与宠物猫相关的图像、图标和其他设计...
Web后端开发-使用Session会话跟踪技术，实现用户登录、注销
03-28
在Web后端开发中，会话（Session）跟踪技术是一种常用的方法，用于在客户端与服务器之间维护用户状态，尤其在用户登录和注销过程中扮演着重要角色。本文将深入探讨Session的工作原理、如何实现用户登录与注销，以及...
移动端适配方案有哪几种？
热门推荐
weixin_49429586的博客
09-28 1万+
什么是移动端适配？什么是rem适配？什么是响应式？移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局。
移动端适配方案总结
Liz's blog hut.
07-28 7827
rem、viewport两种移动端适配方案的介绍和实现总结
移动端适配的五种方案 em rem vw/vh 百分比 媒体查询
蒲公英芽的博客
04-09 6100
移动端适配的几种方案： rem方案 vw/vh方案 rem+vw方案 百分比 基于媒体查询的响应式设计 前言 先来认识一下em： em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em特点：em的值并不是固定的；em会继承父级元素的字体大小。 注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1e...
layui移动端适配_关于移动端适配，你必须要知道的
weixin_39730263的博客
11-02 1623
导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题：1px问题UI图完美适配方案iPhoneX适配方案横屏适配高清屏图片模糊问题...上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？...
移动端页面适配
m0_74331160的博客
12-06 2926
一、移动端页面适配 二、0 适配 三、等比缩放 四、相对单位：em、rem、vw、vh
element 手机适配_移动端常用适配（完美解决）
05-23
针对 Element UI，在移动端进行适配，可以使用以下几种方式： 1. 使用 Element UI 的移动端适配方案：Element UI 提供了一个移动端适配的方案，可以通过引入 `lib-flexible` 和 `px2rem-loader` 来实现。 ```javascript // 安装 lib-flexible 和 px2rem-loader npm install lib-flexible px2rem-loader --save-dev ``` 在入口文件中引入 lib-flexible： ```javascript import 'lib-flexible' ``` 然后在 webpack 配置中添加 px2rem-loader： ```javascript module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'px2rem-loader'] }, { test: /\.vue$/, use: ['vue-loader', 'px2rem-loader'] } ] } } ``` 这样就可以使用 rem 单位进行布局，适应不同的移动设备屏幕。 2. 使用媒体查询和 vw 单位：可以使用媒体查询和 vw 单位来实现 Element UI 的移动端适配。 ```css /* 在移动设备上，将根元素字体大小设置为 10px */ @media screen and (max-width: 767px) { html { font-size: 10px; } } /* 使用 vw 单位进行布局 */ .el-container { width: 100vw; height: 100vh; padding: 2vw; } /* 在需要的元素上使用媒体查询和 vw 单位 */ @media screen and (max-width: 767px) { .el-button { font-size: 3.2vw; padding: 1vw 3vw; } } ``` 3. 使用第三方库进行适配：还可以使用第三方库进行移动端适配，如 Amaze UI、Vant 等。这些库都提供了移动端适配的解决方案，可以根据实际需求选择使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值