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>

效果:

相关推荐
reembarkation9 分钟前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu25 分钟前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|33 分钟前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青34 分钟前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥35 分钟前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb42 分钟前
【Python】字符串
java·前端·python
阿笑带你学前端1 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件1 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
万少1 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_1 小时前
JS-SDK开发企微侧边栏
前端·javascript