移动Web学习06-移动端适配Less预处理器项目案例

项目目标：实现在不同宽度设备中等比缩放的网页效果
在这里插入图片描述
Less代码

@import './base';
@import './normalize';

// 变量: 存储37.5
@rootSize: 37.5rem;
*{
    margin: 0;
    padding: 0;
}
body {
    background-color: #F0F0F0;
}

// 主体内容
.main {
    // padding-bottom: (50 / 37.5rem);
    padding-bottom: (64 / @rootSize);  
    //轮播
    .banner{
       height: (160/@rootSize);
       ul{
         li{
            a{
                img{
                    width: 100%;
                    height: (160/@rootSize);
                }
            }
         }
       }
    }
    //标题
    .title{
        height: (40/@rootSize);
        line-height:(40/@rootSize);
        // background-color: pink;
        h4{
            font-size: (14/@rootSize);
            padding-left: (15/@rootSize);
            color: 3c3c3c;
        }
    }   
    //内容
    .item{
        margin-bottom:(10/@rootSize);
        // 图片
        .pic{
          height: (160/@rootSize);
          position: relative;
          a{
            img{
                width: 100%;
                height: (160/@rootSize);
            }
          }
         .active{
            position: absolute;
            top:(-4/@rootSize);
            left: (15/@rootSize);
            width: (64/@rootSize);
            height: (28/@rootSize);
            background:url(../images/status_active.png);
            background-size: contain;
            color: #fff;
            font-size: (12/@rootSize);
            text-align: center;
            line-height: (24/@rootSize);
         }
         .icon-shoucang1{
            position: absolute;
            top: (15/@rootSize);
            right: (18/@rootSize);
            font-size: (25/@rootSize);
            color: #fff;
         }
        }
        // 内容
        .txt{ 
           padding: (8/@rootSize) (15/@rootSize);
           background-color: #fff;
           .top{
             display: flex;
             justify-content: space-between;
             h5{
                width: (290/@rootSize);
                font-size: (15/@rootSize);
             }
             p{
                color: #FE6249;
                font-size: (15/@rootSize);
             };
           }
           .bottom{
            margin-top: (10/@rootSize);
            display: flex;
            color: #B4B4B4;
            font-size: (11/@rootSize);
            .iconfont{
                margin-right: (5/@rootSize);
                font-size: (11/@rootSize);
            }
            p{
               margin-right: (15/@rootSize);
            }
           }
        }
        &:last-child{
            margin-bottom: 0;
        }

    }
}

.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: (49 / @rootSize);
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #FECA49;
    a{
        text-align: center;
        color: #D78B09;
        i{
          font-size: (24/@rootSize);  
        }
        p{
            font-size: (11/@rootSize);
        }
    }
    .current{
        color: #F0F0F0;
    }
}

<!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">
    <title>FC游乐园</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 主体内容start-->
    <div class="main">

        <!--轮播图start -->
        <div class="banner">
            <ul>
                <li>
                    <a href="#"><img src="./uploads/banner_1.png" alt=""></a>
                </li>
            </ul>
        </div>
        <!--轮播图end -->

        <!--标题 start -->
        <div class="title">
            <h4>乐园活动</h4> 
        </div>
        <!--标题 end -->

        <!--内容模块start -->
        <div class="item">
            <!-- 图片模块 start-->
            <div class="pic">
                <a href="#"><img src="./uploads/item_1.png" alt=""></a>
                <span class="active">进行中</span>
                <i class="iconfont icon-shoucang1"></i>
            </div>
            <!-- 图片模块 end -->

            <!-- 文本模块start -->
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i><span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>本<span>周六</span>开始
                    </p>
                </div>
            </div>
            <!-- 文本模块end -->
            
        </div>
        <!--内容模块end -->

         <!--内容模块start -->
         <div class="item">
            <!-- 图片模块 start-->
            <div class="pic">
                <a href="#"><img src="./uploads/item_1.png" alt=""></a>
                <span class="active">进行中</span>
                <i class="iconfont icon-shoucang1"></i>
            </div>
            <!-- 图片模块 end -->

            <!-- 文本模块start -->
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i><span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>本<span>周六</span>开始
                    </p>
                </div>
            </div>
            <!-- 文本模块end -->
            
        </div>
        <!--内容模块end -->

         <!--内容模块start -->
         <div class="item">
            <!-- 图片模块 start-->
            <div class="pic">
                <a href="#"><img src="./uploads/item_1.png" alt=""></a>
                <span class="active">进行中</span>
                <i class="iconfont icon-shoucang1"></i>
            </div>
            <!-- 图片模块 end -->

            <!-- 文本模块start -->
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i><span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>本<span>周六</span>开始
                    </p>
                </div>
            </div>
            <!-- 文本模块end -->
            
        </div>
        <!--内容模块end -->


         <!--内容模块start -->
         <div class="item">
            <!-- 图片模块 start-->
            <div class="pic">
                <a href="#"><img src="./uploads/item_1.png" alt=""></a>
                <span class="active">进行中</span>
                <i class="iconfont icon-shoucang1"></i>
            </div>
            <!-- 图片模块 end -->

            <!-- 文本模块start -->
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i><span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>本<span>周六</span>开始
                    </p>
                </div>
            </div>
            <!-- 文本模块end -->
            
        </div>
        <!--内容模块end -->
        
    </div>
    <!-- 主体内容 end -->
 
    <!-- 底部工具栏 start -->
    <footer class="footer">
        <a href="#" class="current">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-youhuiquan"></i>
            <p>卡卷</p>
        </a>
        <a href="#">
            <i class="iconfont icon-iconfront-"></i>
            <p>我的</p>
        </a>
    </footer>
    <!-- 底部工具栏 end -->
    <script src="./js/flexible.js"></script>
</body>
</html>

收获：

​ 1、使用Flex布局、用rem代替px单位

​ 2、使用Less的变量定义语法、和导入语法

​ 3、使用手淘Js文件做适配

​ 4、配置号VsCode的Less语法导出

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/544640.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

缺失msvcr110.dll要怎么处理？快捷的修复msvcr110.dll方法

缺失msvcr110.dll要怎么处理？快捷的修复msvcr110.dll方法

当你在使用电脑进行工作或娱乐时&#xff0c;可能会突然遇到一个错误提示&#xff1a;“程序无法启动&#xff0c;因为电脑中缺失msvcr110.dll”。这样的情况不仅会打断你的活动&#xff0c;还可能带来一定程度的不便。面对这个在Windows操作系统中相对常见的问题&#xff0c;其…
阅读更多...
IDEA2023 开发环境配置

IDEA2023 开发环境配置

目录 1. 关闭IDEA自动更新1.2 IDEA 新版样式切换 2. Maven配置2.1本地仓库优先加载2.2 maven.config配置文件中 3. 全局配置JDK4. 配置文件编码:UTF-85. 开启自动编译&#xff08;全局配置&#xff09;6. 开启自动导包7. 开启鼠标悬浮&#xff08;提示文档信息&#xff09;8. 设…
阅读更多...
7 个适用于 Windows 的最佳电脑分区数据恢复软件

7 个适用于 Windows 的最佳电脑分区数据恢复软件

磁盘分区对于正确存储数据以便从硬盘驱动器快速轻松地访问非常有帮助。但是&#xff0c;如果分区损坏&#xff0c;存储在其中的所有数据都会突然变得无法访问。磁盘分区损坏的原因可能有很多&#xff0c;其中最突出的是病毒攻击、突然断电、物理损坏或由于创建坏扇区。 但是&a…
阅读更多...
gzip,bzip2,xz,tar-读书笔记（九）

gzip,bzip2,xz,tar-读书笔记（九）

gzip 将文件进行压缩 在Linux系统中&#xff0c;gzip 是一个压缩和解压文件的命令工具。它使用LZ77压缩算法及霍夫曼编码&#xff08;Huffman Coding&#xff09;来压缩文件&#xff0c;通常用来减少文件的大小&#xff0c;以节约磁盘空间或减少网络传输的时间。 gzip 命令的…
阅读更多...
Linux gcc 6

Linux gcc 6

本章开始学习工具 什么是工具&#xff1f; 本质也是指令 yum 命令 小火车 sudo yum install sl&#xff08;安装sl&#xff09; sudo yum install -y sl //直接yes就不提示了 yum list //将yum源上的软件都穷举出来 yum search sl //结果不友好&#xff0c;不推荐 yum lis…
阅读更多...
Python-GEE遥感云大数据分析、管理与可视化及多领域案例实践应用

Python-GEE遥感云大数据分析、管理与可视化及多领域案例实践应用

随着航空、航天、近地空间遥感平台的持续发展&#xff0c;遥感技术近年来取得显著进步。遥感数据的空间、时间、光谱分辨率及数据量均大幅提升&#xff0c;呈现出大数据特征。这为相关研究带来了新机遇&#xff0c;但同时也带来巨大挑战。传统的工作站和服务器已无法满足大区域…
阅读更多...
【数据结构】泛型（分享重点）

【数据结构】泛型（分享重点）

什么是泛型&#xff1f; 泛型就是适用于许多许多类型&#xff0c;对类型参数化。 怎么创建一个泛型呢 class 泛型类名称<类型形参列表> { // 这里可以使用类型参数 } class ClassName<T1, T2, ..., Tn> { } class 泛型类名称<类型形参列表> extends 继承类…
阅读更多...
Hadoop 3.1.3

Hadoop 3.1.3

第1章 Hadoop概述 1.1 Hadoop是什么 1.2 Hadoop发展历史&#xff08;了解&#xff09; 1.3 Hadoop三大发行版本&#xff08;了解&#xff09; Hadoop三大发行版本&#xff1a;Apache、Cloudera、Hortonworks。 Apache版本最原始&#xff08;最基础&#xff09;的版本&#x…
阅读更多...
AI大模型探索之路-提升篇2：一文掌握AI大模型的核心-注意力机制

AI大模型探索之路-提升篇2：一文掌握AI大模型的核心-注意力机制

目录 前言 一、注意力机制简介 二、注意力机制的工作原理 三、注意力机制的变体 1、自注意力&#xff08;Self-Attention&#xff09; 2、双向注意力&#xff08;Bidirectional Attention&#xff09; 3、多头注意力&#xff08;Multi-Head Attention&#xff09; ​4、…
阅读更多...
卫星影像联合无人机实现农业保险全生命周期监管监测

卫星影像联合无人机实现农业保险全生命周期监管监测

随着科技的进步&#xff0c;农业保险监管系统的发展日新月异。特别是近年来&#xff0c;随着卫星技术与无人机技术的结合&#xff0c;为农业保险监管系统带来了前所未有的革新。本文将深入探讨如何利用卫星与无人机方案构建高效的农业保险监管系统&#xff0c;并结合实例进行说…
阅读更多...
网络篇06 | 应用层 自定义协议

网络篇06 | 应用层 自定义协议

网络篇06 | 应用层 自定义协议 01 固定协议设计&#xff08;简化版&#xff09;1&#xff09;总体设计2&#xff09;值设计 02 可变协议设计&#xff08;进阶版&#xff09;1&#xff09;固定头&#xff08;Fixed Header&#xff09;2&#xff09;可变头&#xff08;Variable H…
阅读更多...
51单片机-ADC模数转换实验-电压值

51单片机-ADC模数转换实验-电压值

一 主要知识点及分析: 1.这里是用到的XPT2046芯片,芯片详细说明自行查阅; 2.这里有两种模式,一般外设的转换用的是单端模式,在使用触摸屏的时候我们选择差分模式; 3.这张图有就是时序图,读写都需要在这上面进行编写代码, 3.1 写8位代码:主要是将传入的控制命令进行写入; 3.2 读…
阅读更多...
C# Solidworks二次开发：相机访问相关API详解

C# Solidworks二次开发：相机访问相关API详解

大家好&#xff0c;今天要介绍的API为相机相关的API&#xff0c;这篇文章比较适合女孩子&#xff0c;学会了相机就会拍照了&#xff0c;哈哈。 下面是要介绍的API: &#xff08;1&#xff09;第一个为GetFocalDistance&#xff0c;这个API的含义为获取相机的焦距&#xff0c;…
阅读更多...
光速论文靠谱不 #学习方法#笔记

光速论文靠谱不 #学习方法#笔记

光速论文是一款优秀的论文写作工具&#xff0c;许多学生和学者都对它赞不绝口。那么&#xff0c;光速论文靠谱吗&#xff1f;答案当然是肯定的&#xff01; 首先&#xff0c;光速论文具有强大的查重和降重功能。它能够帮助用户快速检测论文中的抄袭内容&#xff0c;并提供专业的…
阅读更多...
小程序变更主体影响使用吗？

小程序变更主体影响使用吗？

小程序迁移变更主体有什么作用&#xff1f;有些小程序开发者&#xff0c;因为业务调整&#xff0c;或者公司更换&#xff0c;需要更换小程序主体&#xff01;但是很多开发者对于小程序更换主体的操作流程并不熟悉&#xff0c;于是我们专门准备了这篇&#xff0c;关于小程序更换…
阅读更多...
2024年航海制造工程与海洋工程国际会议(ICNMEME2024)

2024年航海制造工程与海洋工程国际会议(ICNMEME2024)

2024年航海制造工程与海洋工程国际会议(ICNMEME2024) 会议简介 2024年航海制造工程与海洋工程国际会议(ICNMEME2024)旨在将研究人员、工程师、科学家和行业专业人士聚集在一个开放论坛上&#xff0c;展示他们在导航制造工程与海洋工程领域的激励研究和知识转移理念。然而&…
阅读更多...
嵌入式MCU BootLoader开发配置详细笔记教程

嵌入式MCU BootLoader开发配置详细笔记教程

目录 一、BootLoader基础 二、BootLoader原理及配置 三、BootLoader程序 bootloader.h bootloader.c 四、Application1 用户程序 application1.h application1.c 五、Application2 用户程序 application2.h 六、程序运行效果 七、工程文件Demo 一、BootLoader基础 …
阅读更多...
C++ | Leetcode C++题解之第29题两数相除

C++ | Leetcode C++题解之第29题两数相除

题目&#xff1a; 题解&#xff1a; class Solution { public:int divide(int dividend, int divisor) {// 考虑被除数为最小值的情况if (dividend INT_MIN) {if (divisor 1) {return INT_MIN;}if (divisor -1) {return INT_MAX;}}// 考虑除数为最小值的情况if (divisor I…
阅读更多...
C++ 之 【类与对象】从入门到精通一条龙服务 最终篇（static成员、友元、匿名对象。。。）

C++ 之 【类与对象】从入门到精通一条龙服务 最终篇（static成员、友元、匿名对象。。。）

&#x1f4b4;到用时方恨早&#xff0c;白首方悔挣的少 车到山前没有路&#xff0c;悬崖勒马勒不住 一、再谈构造函数 1.构造函数体赋值 2.初始化列表 3.explicit关键字 二、Static成员 1.概念 2.特性 三、友元 1.友元函数 2.友元类 四、内部类 五、匿名对象 六、…
阅读更多...
项目5-博客系统5+程序部署（Linux基本使用）

项目5-博客系统5+程序部署（Linux基本使用）

1.Linux的基本使用 1.1 Linux 是什么 Linux 是⼀个操作系统. 和 Windows 是 "并列" 的关系. 1.2 Unix & Linux 发展历程图 1.1969−1970 年, ⻉尔实验室的 Dennis Ritchie (左) 和 Ken Tompson (右) 开发了 Unix 操作系统. 2. Unix ⽕了之后, 衍⽣出很多的分⽀…
阅读更多...
最新文章

Copyright @ 2022~2023