移动端适配的几种方式

最新推荐文章于 2024-06-01 21:54:01 发布

胡椒粉0121

最新推荐文章于 2024-06-01 21:54:01 发布

阅读量1.6w

点赞数 7

分类专栏： CSS大全文章标签：移动的适配 rem适配

本文链接：https://blog.csdn.net/huangjianfeng21/article/details/91488403

版权

CSS大全专栏收录该内容

1 篇文章 0 订阅

订阅专栏

百分比适配方式

这种方法，只是宽度能适配，高度不能适配，只能设置某个高度固定死

需求：是四个div高度为100px，宽度等宽横向排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <style type="text/css">
        body {
            margin: 0;
        }
        div {
            width: 25%;
            height: 100px;
            float: left;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
        }
        .box3 {
            background: green;
        }
        .box4 {
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

动态生成viewport适配方式

这种方式其实是动态设置缩放比例，动态创建meta标签，并且将计算出来的缩放比例放到这个标签的content属性里面

如果目标尺寸设置320,那么整个屏幕宽度就是320px，设置为750那么整个屏幕就是750px，这样我们页面中的每个元素就可以根据设计图来设置宽高了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        (function(){
            var w = window.screen.width;
            var targetW = 320;
            var scale = w/targetW; //当前尺寸/目标尺寸
            var meta = document.createElement("meta");
            meta.name = "viewport";
            meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
            console.log(scale);
            document.head.appendChild(meta);
        })();
    </script>
    <!--
    <meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    -->
    <style type="text/css">
        body {
            margin: 0;
        }
        div {
            width: 80px;
            height: 100px;
            float: left;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
        }
        .box3 {
            background: green;
        }
        .box4 {
            background: yellow;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

rem适配方式

rem适配方式第一步首先需要设置视口的约束（固定的）

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

先来看一下在rem适配之前是怎么样的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Title</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
<body>
  <div class="box"></div>
</body>
</html>

分析运行结果，当屏幕的宽度是320的时候，这个box的宽度比例是200/320，当换一个手机屏幕大小不一样的，比如375的那么box的宽度比例是200/375

那么在不同手机中相同的一个box盒子占整个屏幕的宽度比例就不一样了，所以呈现的效果也是不一样的

那么对于这个问题可以使用rem来做适配，rem适配最主要的就是html根元素字体大小设置屏幕区域的宽度，这样整个屏幕就变成了1rem为基准，然后在设置每个元素的时候试用rem来做单位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Title</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width:2rem;
    height: 0.5rem;
    background-color: red;
  }
</style>
<script>
  (function () {
    // 获取屏幕区域的宽度
    var w = document.documentElement.clientWidth

    // 获取html根元素
    var htmlNode = document.querySelector('html')

    // 设置字体大小
    htmlNode.style.fontSize = w + 'px'
  })()
</script>
<body>
  <div class="box"></div>
</body>
</html>

这样当我们屏幕宽度是320的时候，1rem就等于320 ，2rem就等于2*320，当屏幕宽度是375的时候1rem就等于375，也就是说1rem会随着屏幕的宽度来变化适应

其他适配插件

项目开发中可以使用上面这几种方式去做移动端的适配也可以使用一些插件来帮我们做这个适配，比如：lib-flexible和postcss-px2rem

使用方法查看这篇文章：基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem

胡椒粉0121

关注

7
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
移动端适配的几种方式

百分比适配方式这种方法，只是宽度能适配，高度不能适配，只能设置某个高度固定死需求：是四个div高度为100px，宽度等宽横向排列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&gt...
复制链接

扫一扫

专栏目录