rem适配方案之flexible.js

把设备分为10等分,比例一致;

若设计稿是750px,只需将文字设计为75px;

rem值:页面元素px值 / 75

在任意不同的屏幕下都可以显示不同的大小,比单一的rem适配更灵活

案例:(技术 flexible.js + rem)

css 复制代码
@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}


body {
    /*稍有改动*/
    margin: 0 auto;
    width: 10rem;
    line-height: 1.5;
    background-color: #f2f2f2;
}

.search_content {
    display: flex;
    position: fixed;
    width: 10rem;
    height: 1.1733rem;
    background-color: rgb(248, 13, 13);
    top: 0;
    left: auto;

    img {
        width: .48rem;
        height: .8rem;
    }

    .classify {
        width: .5867rem;
        height: .9333rem;
        margin: .1467rem .3333rem .1333rem;
    }

    .search {
        flex: 1;

        input {
            border: 0;
            width: 100%;
            height: .88rem;
            border-radius: .44rem;
            font-size: .3333rem;
            background-color: #fff2cc;
            margin-top: .1333rem;
            padding-left: .7333rem;
        }
    }

    .login {
        width: .5867rem;
        height: .9333rem;
        margin: .1467rem .3333rem .1333rem;
    }
}
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
   <title>~</title>
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <script src="js/index.js"></script>
   <link rel="shortcut icon" href="">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题!*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }
   </style>

</head>

<body>
   <div class="search_content">
      <a href="#" class="classify"><img src="https://image1.suning.cn/uimg/cms/img/157199320847433454.png" alt=""></a>
      <div class="search">
         <form action="">
            <input type="search" value="苏宁易购">
         </form>
      </div>
      <a href="#" class="login"><img src="https://image2.suning.cn/uimg/cms/img/157199321817918653.png" alt=""></a>
   </div>
</body>

</html>

效果:

相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法4 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku4 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode4 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu4 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu4 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu4 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu4 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu4 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在4 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net