使用rem的方法实现屏幕自适应

最新推荐文章于 2024-02-26 17:11:02 发布

时空旅人_

最新推荐文章于 2024-02-26 17:11:02 发布

阅读量448

点赞数 1

分类专栏：屏幕自适应文章标签： html css 自动化

本文链接：https://blog.csdn.net/qq_53137322/article/details/124786349

版权

屏幕自适应专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一，准备工作

1.下载js代码并且引入html文件之中

下载地址

https://gitee.com/lvr-ren/jbwhttps://gitee.com/lvr-ren/jbw

二，安装插件px2rem+，并设置基准像素数

1，安装插件

2，设置

基准像素数：假如你的电脑为2000px,那么你的基准像素数为2000*0.1=200px

(如果你在设计一个页面，页面宽度为960，那么这时候你应该将基准像素数改为96（960*0.1=96)

我的电脑宽为1920，所以基准像素数为192.

3，准备好代码

注意：你的图片，以及图片路径要改哦

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入代码 -->
    <meta name=" viewport "
        content=" width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no ">
    <!-- 引入js文件 -->
    <script src="./index.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屏幕自适应</title>
    <style>
            .a1 {width: 1.041667rem/* 200/192 */;
                height: 1.041667rem/* 200/192 */;
                background-color: rgb(56, 199, 54);}
            div {width: 200px;height: 200px;
                background-color: rgb(12, 174, 228);}
            .a2 {font-size: .15625rem/* 30/192 */;}
            h1 {font-size: 30px;}
            .a3 {width: 1.041667rem/* 200/192 */}
            img {width: 200px;}
        </style>
</head>
<body>
    <div class="a1"></div>
    <div></div>
    <h1 class="a2">我会变</h1>
    <h1>我不会便</h1>
    <img src="./1 (135).png" alt="公主" class="a3">
    <img src="./1 (135).png" alt="公主">
</body>

</html>