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>

效果:

相关推荐
abigale031 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者21 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile25 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399727 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊32 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火33 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能