设计稿是750px时的,rem设置

最新推荐文章于 2024-06-30 11:39:58 发布

木偶小小

最新推荐文章于 2024-06-30 11:39:58 发布

阅读量1.2w

点赞数

分类专栏：移动端rem html5 文章标签： rem换算

本文链接：https://blog.csdn.net/sunny_810/article/details/98949817

版权

html5 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

移动端rem

0 篇文章 0 订阅

订阅专栏

<script>
        + function() {
            remLayout();

            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
  </script>



body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.layout {
  width: 100%;
  max-width: 750px !important;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto;
  text-align: center;
}
.a1 img {
  height: 4.55rem;
}

图中的img高是455px

以750px的设计稿为准。图片高455px. 换算成rem即4.55rem.

加了这段之后，设计稿上
比如是100px。即1rem;
450px.即4.5rem;
@REM:100;
width:100px / @REM;

简单的登录注册页

完整代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="applicable-device" content="mobile" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title></title>
    <style>
      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            background:rgba(0,0,0,0.8);
            max-width:750px;
            overflow-x:hidden;
            font-size:0.16rem;
            font-family: "Microsoft YaHei", "微软雅黑", SimSun, "宋体", "Hiragino Sans GB", Helvetica, Arial, "Lucida Grande", sans-serif !important;
        }
        .leftright {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            text-align: justify;
            position: relative;
        }

        a {
            text-decoration: none;
        }
        .form{
            width:80%;
            margin:2rem auto;
        }
        .form-item{
            padding:0.1rem 0;
            margin-bottom:0.2rem;
            position:relative;
            background:rgba(255,255,255,.2);
           color: #eee;
           border-bottom:rgba(255,255,255,.2);
        }
        .label{
            width:22%;
            text-align:center;
            display:inline-block;
        }
        .input{
            border:none;
            outline:none;
            display:inline-block;
            width:75%;
            height:0.6rem;
            line-height:0.6rem;
            padding:0 0.08rem;
             background:none;
             color: #eee;
        }
        .code .input{
            width:48%;
        }
        .code-btn{
            position: absolute;
            text-decoration: underline;
            color: #eee;
            right: 0.3rem;
            top: 0.2rem;
            letter-spacing: 0.01rem;
        }
        .form-extra,.login-btn,.mark-text{
            color: #eee;
        }
        .form-btn{
            margin:0.6rem auto 0.2rem;
             color: #fff;
            background:mediumaquamarine;
             height:.8rem;
            line-height:.8rem;
             text-align:center;
              letter-spacing: 0.02rem;
             border-radius:0.08rem;
        }
        .form-checkbox ,.mark-text{
             display:inline-block;
            vertical-align: middle;
        }
        .form-bot .mark-text{
         color:mediumaquamarine;
        }
    </style>

    <script>
        + function() {
            remLayout();

            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
    </script>
</head>


<body>
    <form class="form">
        <div class="form-item">
            <label for="" class="label">手机号：</label>
            <input   class="input" type="text" >
        </div>
         <div class="form-item code">
            <label for="" class="label">验证码：</label>
            <input  class="input"  type="text" >
            <a   class="code-btn"  href="javascript:;">获取验证码</a>
        </div>
         <div class="form-item">
            <label for="" class="label">设置密码：</label>
            <input class="input"  type="text">
        </div>
        <div class="form-extra leftright">
            <label for="" class="extra-item">
                <input  class="form-checkbox"  type="checkbox">
                <span class="mark-text">记住密码</span>
            </label>
            <div class="extra-item">
                <a href="/login" class="login-btn">已有帐号登录</a>
            </div>
        </div>
        <div class="form-btn">
        注册
        </div>
        <label for="" class="form-bot">
          <input class="form-checkbox" type="checkbox">
          <span class="mark-text">阅读并同意sport相关协议条款</span>
        </label>
    </form>
</body>
</html>

登录注册