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>

效果:

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui