px，em和rem，移动端移动端适配

最新推荐文章于 2023-07-17 14:36:39 发布

少年是只猫

最新推荐文章于 2023-07-17 14:36:39 发布

阅读量1k

点赞数

分类专栏： css 移动端文章标签： css rem 移动端

本文链接：https://blog.csdn.net/qq_41128253/article/details/97752816

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

px，em和rem

px是固定的长度单位。em是父元素的font-size（字体大小）的值，常用来设置首行缩进2em（2字符）。rem是根节点（html）的font-size（字体大小）的值，可以用来做移动端的自适应。

rem做移动端适配

一份长度最好是除得尽的数值如40,50。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script language="JavaScript" type="text/javascript">

        var html = document.documentElement;
        var htmlWidth = document.documentElement.clientWidth;

        //html.style.fontSize = htmlWidth/27+'px'; //如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px
        html.style.fontSize = htmlWidth/15+'px';   //如：设计图750宽度，将屏幕分为15份，每份为设计图的50px

    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 7.5rem;     /* 相当于设计图上的7.5*50px     设置的值=设计图上的长度/每份的长度 */
            height: 2.5rem;  /* 相当于设计图上的2.5*50px  */
            border: 1px solid #000;
        }

    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

少年是只猫

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
px，em和rem，移动端移动端适配

px，em和rempx是固定的长度单位。em是父元素的font-size（字体大小）的值，常用来设置首行缩进2em（2字符）。rem是根节点（html）的font-size（字体大小）的值，可以用来做移动端的自适应。rem做移动端适配一份长度最好是除得尽的数值如40,50。<!doctype html><html lang="en"><head> ...
复制链接

扫一扫