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>

效果:

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试