首页 > 其他分享 >移动端H5适配方案 (flexible.js +rem)

移动端H5适配方案 (flexible.js +rem)

时间:2023-07-28 14:34:31浏览次数:54  
标签:less 适配 750px js width html rem flexible

一、flexible.js

https://github.com/amfe/lib-flexible
默认把当前屏幕划分10等份

二、vscode

  • cssrem插件(把px转换为rem)

    • 可以设置font-size大小
      image
  • easy less(保存.less文件后,自动生成对应的.css文件)

三、示例

//index.less
// 当屏幕超过750px时,强制把html字体大小改为75px,这样宽度就不会超过750px
@media screen and (min-width:750px) {
    html {
        font-size: 75px !important;
    }
}

body {
    min-width: 320px;
    max-width: 750px;
    width: 10rem;
    margin: 0 auto;

}

a {
    text-decoration: none;
}


.header {
    width: 10rem;
    display: flex;
    height: 1.1733rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

}

.search-classify {
    width: 2rem;
    background-color: pink;
}

.search {
    flex: 1;
    background-color: coral;
}

.search-login {
    width: 2rem;
    background-color: skyblue;
}
#index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0 ,user-scalable=0,minimum-scale=1,maximum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
</head>

<body>
    <header class="header">
        <div class="search-classify">1</div>
        <div class="search">2</div>
        <div class="search-login">3</div>
    </header>
</body>

</html>

标签:less,适配,750px,js,width,html,rem,flexible
From: https://www.cnblogs.com/bangbangzoutianya/p/17587497.html

相关文章

  • Three.js使用InstancedMesh实现性能优化
    1.引言有这么一种场景:需要渲染一座桥,桥有很多桥柱,桥柱除了位置与倾斜角度不完全相同外,其他均相同,由于桥柱数量很大,使用three.js绘制较为卡顿,如何优化?注意,要求后续能选中某个桥柱2.概念2.1合并几何体three.js官方教程里提到,大量对象的优化-three.jsmanual(threejs.org),......
  • Ubuntu apt 安装 nodejs
    安装nodejs在windows下,都是到Nodejs官方网站上下载压缩包。然后在环境变量中配置Nodejs的环境变量,但是到了Ubuntu下这种情况可能会改变,因为有强大的APT包管理器。所以我们要做的就是两件事情,第一找到资源仓库,第二安装所需要的资源。Step1Nodejs的APT仓库#先安装Python的软件......
  • JS直接将页面的内容作为excel下载
     做个笔记,后续自己可以看看,将页面的一个Table直接输出为excel文件,亲测有用。 //下载excelfunctiondownloadExcel(){varuri='data:application/vnd.ms-excel;base64,';vartemplate=`<htmlxmlns:o="urn:schemas-microsoft-com:o......
  • 引入外部文件(图片、js等)出现403 forbidden的问题
    引入外部文件(图片、js等)出现403forbidden的问题报403错误则是访问被拒绝浏览器的防盗链机制当你的项目和需要访问的地址不在同一个域内,这时浏览器的防盗链机制就发挥作用了。其中防盗链是利用HTTPheader中的referer来实现的。当浏览器向服务器发送请求时会带上referer,......
  • mysql 代码适配 postgresql 适配改写,优化案例(行转列 + 标量子查询改写)
    最近在适配个MySQL应用的项目,各种SQL改成PG兼容的语法真的是脑壳痛,今天遇到个有意思的案例。原MySQLSQL语句:SELECTDISTINCTl.MALL_NAME'项目',t.CONT_NO'合同编号',t.COMPANY_NAME'租户',t.STORE_NOS'铺位号',(selectGROUP_CONCAT(r.FLOO......
  • Java 对json排序
    Java对JSON排序在日常的开发中,我们经常需要将JSON数据进行排序,以满足业务需求或者提高查询效率。本文将介绍如何使用Java对JSON数据进行排序,并提供示例代码帮助理解。什么是JSON?JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,常用于前后端数据传输。它以......
  • Android开发笔记:屏幕适配
    这几天刚刚接触了新的项目,做一个android客户端。本周的工作是完成客户端的UI界面和功能实现,但是对于Android开发最头疼的部分,即是对于纷杂的屏幕做适配的工作现在来说是最棘手的!图像显示所需的概念:像素:一幅图片的显示就是由许多显示着不同颜色的小方格组成的,这样的小方格就被称......
  • Still waiting to schedule task ‘nodejs-html5’ is offline
    运行任务时等待节点在线的解决方案在进行分布式任务调度时,我们可能会遇到一个问题:当一个节点不在线时,我们如何等待节点上线再执行任务?本文将介绍如何使用Node.js编写代码实现此功能。问题描述假设我们有一个任务调度程序,使用Node.js编写。在这个任务调度程序中,我们有一个名为nod......
  • 低版本浏览器适配问题
    使用vue3+vite默认支持Chrome>=87chrome53:npminstall@vitejs/plugin-legacy-D//vite-config.jsimportlegacyfrom"@vitejs/plugin-legacy";legacy({targets:['defaults','ie>=11','chrome53'],......
  • android studio 学习数据适配器
    AndroidStudio学习数据适配器在Android开发中,我们经常需要将数据显示在界面上,而数据适配器(Adapter)就是帮助我们将数据和界面进行绑定的重要工具。在本文中,我们将学习如何使用AndroidStudio创建和使用数据适配器。数据适配器的作用数据适配器是连接数据和界面的桥梁,它负责将数......