REM——1

最新推荐文章于 2025-04-02 02:00:00 发布

原创最新推荐文章于 2025-04-02 02:00:00 发布 · 194 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

REM

参考：移动web开发适配秘籍Rem

大纲

移动web开发与适配

rem原理与简介

采用rem适配页面

综述

跑在手机端的web页面（H5页面）

跨平台，基于webview

告别IE，拥抱webkit

更高的适配性和性能要求

常见移动web适配方法：

PC	移动web
960px/1000px，居中	定高，宽度百分比
盒子模型，定高，定宽	flex
display:inline-block	Media Query(媒体查询）

MediaQuery(媒体查询)

@media 媒体类型 and(媒体特性){

/*css样式*/

}

媒体类型：screen,print...

媒体特性：max-width,max-height..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mediaquery</title>
    <style type="text/css">
        .box{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        @media screen and (max-width:320px){
            .inner {
                width: 60px;
                height: 100px;
                background-color: blue;
            } 
        }
        @media screen and (min-width:320px){
            .inner {
                width: 100px;
                height: 100px;
                background-color: yellow;
            } 
        }

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

百分比布局，与mediaquery布局

REM原理（font size of the root element）

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

字体单位：值根据html根元素大小而定，同样可以作为宽度、高度等单位

适配原理：将px替换成rem,动态修改html的font-size适配

兼容性：IOS6以上和android2.1以上。

REM代码&动态修改fontsize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        html{
            font-size:17px;
        }
        .box{
            width: 10rem;
            height: 10rem;
            background-color: red;
        }
        .text{
            color: #ffffff;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="text"> hello REM </p>
    </div>
</body>
</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 10rem;
            height: 10rem;
            background-color: red;
        }

        .text {
            color: #ffffff;
            font-size: 2rem;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="text"> hello REM </p>
    </div>
    <script type="text/javascript">
        let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        console.log('htmlWidth', htmlWidth);

        //获取视窗高度
        let htmlDom = document.getElementsByTagName('html')[0];

        htmlDom.style.fontSize = htmlWidth/10+'px';

    </script>
</body>

</html>

REM进阶知识

REM基准值的计算

REM数值计算与构建

REM与SCSS结合使用

REM适配实战

a.scss，编译为：b.css

/*a.scss*/
@function px2rem($px){
    $rem: 37.5px;
    @return ($px/ $rem) + rem;
}

.hello{
    width:px2rem(100px);
    height: px2rem(100px);
    &.b {
        width: px2rem(50px);
        height: px2rem(50px);
    }
}

cmd： node-sass a.scss b.css

安装：npm install -g node-sass

/* b.css */
.hello {
  width: 2.66667rem;
  height: 2.66667rem; }
  .hello.b {
    width: 1.33333rem;
    height: 1.33333rem; }

采用REM高仿网易新闻H5版新闻列表页

步骤分析：

页面框架搭建（构建，scss）

页面样式编写

rem计算代码编写

适配多种机型大小，resize完善

1、搭建框架：

scss编译报错，参考：https://www.imooc.com/qadetail/206173?t=318509

2、页面样式编写：

我的代码：

https://gitee.com/Yenn-2017_admin/news_page_h5