前端案例-3 rem布局移动页面

最新推荐文章于 2024-10-14 12:46:45 发布
最新推荐文章于 2024-10-14 12:46:45 发布
阅读量299 收藏 1
点赞数
分类专栏： 前端案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KathyLJQ/article/details/115265641
版权
本文介绍了一个使用less、媒体查询和rem布局移动页面的实战案例。首先，详细讲解了如何安装和配置less，包括下载node、在cmd中安装less以及在VSCODE中安装easyless插件。接着，创建项目目录，包含index.html、common.less和index.less等文件，并引入normalize.css。此外，还介绍了使用flexible.js和rem的方法，提供了flexible.js的下载链接，并提到了需要将index.js重命名为flexible.js。最后，提到了在VScode中安装cssrem插件，并给出了设置cssrem基础字体的视频教程链接。
摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

  1. less+媒体查询+rem
    步骤：
    (1)下载node（本版本为node-v14.16.0-x64）下载完直接双击下一步直到安装完成（在cmd中输入node -v确认是否安装成功，若安装成功会提示当前版本号，否则安装不成功）
    https://pan.baidu.com/s/1rSeVOqsoLuLCqjsYhlNDEQ
    提取码：8iyz
    (2)在cmd中安装less,命令行中输入npm install -g less,安装完成后输入lessc -v 确认安装是否成功，如果出现当前less版本号则说明成功，否则安装不成功
    (3) 在VSCODE 中安装easyless插件，安装步骤就不详说了，直接在vscode里面搜索easyless安装即可
    在这里插入图片描述
    （4）创建目录（里面的CSS文件，是less文件保存后自动生成的，一开始是没有的）
    在这里插入图片描述
    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">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>苏宁易购</title>
</head>

<body>
    <div class="header">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" class="input" value="家电采购季">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>
    <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>
    <div class="ad">
        <a href="#">
            <img src="upload/ad1.gif" alt="">
        </a>
        <a href="#">
            <img src="upload/ad2.gif" alt="">
        </a>
        <a href="#">
            <img src="upload/ad3.gif" alt="">
        </a>
    </div>

    <div class="nav">
        <a href="#"><img src="upload/nav1.png" alt=""> <span>爆款手机</span></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
        <a href="#"><img src="upload/nav1.png" alt=""></a>
    </div>
</body>

</html>

common.less

// 先写上PC端常规尺寸的html文字大小
html{
    font-size: 50px;
}
//写上移动端常用尺寸的html文字大小
@pieces: 15;

@media screen and (min-width:320px){
    html{
        font-size:(320px / @pieces);
    }
}

@media screen and (min-width:340px){
    html{
        font-size:(340px / @pieces);
    }
}

@media screen and (min-width:360px){
    html{
        font-size:(360px / @pieces);
    }
}

@media screen and (min-width:375px){
    html{
        font-size:(375px / @pieces);
    }
}

@media screen and (min-width:384px){
    html{
        font-size:(384px / @pieces);
    }
}

@media screen and (min-width:400px){
    html{
        font-size:(400px / @pieces);
    }
}

@media screen and (min-width:414px){
    html{
        font-size:(414px / @pieces);
    }
}

@media screen and (min-width:424px){
    html{
        font-size:(424px / @pieces);
    }
}

@media screen and (min-width:480px){
    html{
        font-size:(480px / @pieces);
    }
}

@media screen and (min-width:540px){
    html{
        font-size:(540px / @pieces);
    }
}

@media screen and (min-width:720px){
    html{
        font-size:(720px / @pieces);
    }
}

@media screen and (min-width:750px){
    html{
        font-size:(750px / @pieces);
    }
}

a{
    text-decoration: none;
    color: black;
}

index.less

@import "common";


body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background: #F2F2F2;
}
@baseFontsize: 50;
.header{
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    // min-width: 320px;
    width: 15rem;
    height: (88rem / @baseFontsize);
    background:#FFC001 ;
.classify{
    width: (44rem / @baseFontsize);
    height: (70rem /@baseFontsize);
    // background: blueviolet;
    margin: (10rem / @baseFontsize) (20rem / @baseFontsize) ;
    background: url('../imgs/classify.png') no-repeat;
    background-size: 100%;
}
.search{
    flex: 1;
    width: 100%;
    // background-color: cornflowerblue;
    input{
        outline: none;
        border: 0;
        width: 100%;
        height: (66rem / @baseFontsize);
        margin-top: (12rem / @baseFontsize);
        border-radius: (33rem / @baseFontsize);
        background-color: #fff2cc;
        font-size: (25rem / @baseFontsize);
        color: rgb(117, 117, 117);
        padding-left: (55rem / @baseFontsize);

    }
}

.login{
    width: (75rem / @baseFontsize);
    height: (70rem / @baseFontsize);
    // background-color: blue;
    margin: (10rem / @baseFontsize);
    color: white;
    font-size: (25rem / @baseFontsize);
    text-align: center;
    line-height:(70rem / @baseFontsize) ;
}

}

.banner{
    width: (750rem / @baseFontsize);
    height: (368rem / @baseFontsize);
    img{
        width: 100%;
    }
}

.ad{
    display: flex;
    width: (750rem / @baseFontsize);
    height: (199rem / @baseFontsize);
    a{
        flex: 1;
        img{
            width: 100%;
        }

    }
}

.nav{
    margin-top: (10rem / @baseFontsize);
    width: (750rem / @baseFontsize);
    // height: (280rem / @baseFontsize);
    a{
        float: left;
        width: (150rem / @baseFontsize);
        height: (140rem / @baseFontsize);  
        // background-color: green;
        text-align: center;
        line-height: (25rem / @baseFontsize);
        img{
            display: block;
            margin-top:(10rem / @baseFontsize);
            margin-left: 50%;
            transform: translateX(-50%);
            width: (82rem / @baseFontsize);
            height: (82rem / @baseFontsize);  
        }
        span{
            
            font-size: (25rem / @baseFontsize);
            // line-height: (140rem / @baseFontsize);


        }
    }
}

normalize.css同https://blog.csdn.net/KathyLJQ/article/details/115219233的normalize.css

  1. flexible.js+rem
    步骤：
    (1)下载flexible.js (版本lib-flexible-2.0）
    下载地址：https://pan.baidu.com/s/1LBlVcIPJYmx2cxvZt_CPHg
    提取码：snxt
    在这里插入图片描述

(2)创建目录（js文件夹中的flexible.js 是由步骤（1）文件夹中的index.js 重命名为flexible.js后拷贝进来的）
在这里插入图片描述
（3）在VScode中安装cssrem插件，此处就不详细说了，直接搜索cssrem安装即可
在这里插入图片描述
如何设置cssrem的html基础字体：https://www.bilibili.com/video/BV1jU4y1Y7h9
html 代码同上述的第一个方案，下面直接放index.css

/*  */

a {
    text-decoration: none;
    color: black;
}


/* 限定屏幕宽度超过750px的html字体大小 */

@media screen and (min-width:750px) {
    html {
        font-size: 75px !important;
    }
}

body {
    min-width: 320px;
    max-width: 750px;
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background: #F2F2F2;
}

.header {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    height: 1.173333rem;
    background: #FFC001;
}

.header .classify {
    width: .586667rem;
    height: .933333rem;
    margin: .133333rem .266667rem;
    background: url('../imgs/classify.png') no-repeat;
    background-size: 100%;
}

.header .search {
    flex: 1;
    width: 100%;
}

.header .search input {
    outline: none;
    border: 0;
    width: 100%;
    height: .88rem;
    margin-top: .2rem;
    border-radius: .44rem;
    background-color: #fff2cc;
    font-size: .333333rem;
    color: #757575;
    padding-left: .733333rem;
}

.header .login {
    width: 1rem;
    height: .933333rem;
    margin: .2rem;
    color: white;
    font-size: .333333rem;
    text-align: center;
    line-height: .933333rem;
}

.banner {
    width: 10rem;
    height: 4.906667rem;
}

.banner img {
    width: 100%;
}

.ad {
    display: flex;
    width: 10rem;
    height: 2.653333rem;
}

.ad a {
    flex: 1;
}

.ad a img {
    width: 100%;
}

.nav {
    margin-top: .133333rem;
    width: 10rem;
}

.nav a {
    float: left;
    width: 2rem;
    height: 1.866667rem;
    text-align: center;
    line-height: .333333rem;
}

.nav a img {
    display: block;
    margin-top: .133333rem;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 1.093333rem;
    height: 1.093333rem;
}

.nav a span {
    font-size: .333333rem;
}

*/
KathyLJQ
关注
专栏目录
(七）移动端前端开发-基于rem布局案例2
m0_56517198的博客
02-12 203
移动端前端开发，基于rem布局，制作淘宝交易成功页面头部。通过javascript代码获取设备屏幕的宽度，来调整html根节点的字体大小。使用相对单位rem设置页面字体、宽度等大小尺寸。HTML部分包含头部、交易成功、地址三部分。让页面自适应不同型号屏幕的移动设备。
移动Web开发之 rem适配布局----苏宁首页案例制作
不爱吃菜的菜菜的博客
05-13 737
目录 1. 技术选型 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 4. 设置公共common.less文件 5. 新建index.less文件 6. body样式 7.细节 1. 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取rem适配布局（less + rem + 媒体查询） 设计图： 本设计图采用 750px 设计尺寸 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 <meta na...
rem布局案例
03-29
使用了less和rem结合的仿照京东手机端的一个小案例demo
【CSS】872- 浅析rem布局方案
pingan8787
02-17 212
一些像素概念物理像素：即实际的每一个物理像素，也就是移动设备上每一个物理显示单元（点）设备逻辑像素（css中的px）：可以理解为一个虚拟的相对的显示块，与物理像素有着一定的比例关系，也就是...
CSS 中玩转 rem：尺寸单位笑着用！
最新发布
qq_44996048的博客
10-14 893
CSS 是前端的魔法棒，但光有样式还不够，尺寸单位也是个绕不过的坎！今天我们来聊聊 rem，这个前端圈的“真大哥”，如何在布局中实现灵活的响应式设计。
px、em、rem区别
Savannah
11-26 221
PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前...
html css rem响应式页面布局实例
☆╮123☆
05-25 818
html> head> meta charset="utf-8"> title>响应式页面csstitle> meta name="description" content="A basic responsive web page– an example from Chapter 1"> meta name="viewport" content="width=dev
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
在前端开发领域，移动Web是不可或缺的一部分，尤其是在大型电商平台如京东...通过分析和学习这个案例，开发者不仅可以提升自身在流式布局方面的技能，还能了解到如何将这些技术实际应用到大型电商网站的前端开发中。
移动端rem布局的两种实现方法
12-03
在rem布局中，媒体查询常用来调整根元素的字体大小，进而影响整个页面的尺寸。以下是一个简单的例子： ```css @media only screen and (max-width: 600px), only screen and (max-device-width:400px) { html, ...
移动WEB前端高级开发项目实战_移动网页样式布局_编程案例解析实例详解课程教程.pdf
05-22
随着手机等移动设备的普及,用户的使用场景...当然移动端也并非完美,兼容性问题依旧存在,这也许是做前端开发的乐趣所在本章将向读者介绍移动端常用布局,如 Media Query、Flex、rem等,帮助读者快速掌握移动端布局方法。
移动端rem布局 demo，可以作为简单参考
06-13
其中有一些不足，还有由于时间原因部分css3动画没有加载完全js方面也稍差了些，但我觉得给rem布局换算比较懵的同学能有个好的参考了
前端学习（294）：rem小实例
歌谣的博客
01-02 242
alt+z转换为rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
rem 布局（基础案例）
m0_49378755的博客
05-21 132
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function () { (function (window, document) { let hm = document.documentElement; let fen = 10; (fun
移动端rem布局实例
weixin_42668319的博客
02-29 729
逆战班学生记录： rem理解： em是一个相对单位，1em等于当前元素或父元素的font-size值 rem是指相对于根元素的字体大小的单位。简单的说它就是1个html标签的font-size大小。 rem的布局 原理： 先根据设计图量取高度，想办法动态改变html标签的font-size大小，然后转换成rem，从而适配不同设备进行等比例缩放。这里如何使font-size动态化？我采用通过vw（...
移动端使用rem布局-案例
JackieDYH的博客
06-29 440
在页面引入这段js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth;
移动端rem布局 案例练习
MartinYP的博客
08-07 329
学习记录博客
媒体查询 rem布局【微重点】案例
egg_er的博客
11-11 816
rem布局 经过之前聊得 流式布局，以及 flex布局，今天我们聊聊rem布局，怎么做呢？其实分三布就可以啦。 确定你的项目的页面宽度分成多少等份 利用媒体查询设字体大小 量出你设计图上的宽高，除以字体大小，单位为rem。 这样设计以后 你设计的页面就可以实现多尺寸大小自适应啦。 （利用上面的思路做个自适应块儿） // 结构 <body> <header class="header"> </header> </body>
（六）移动端前端开发-基于rem布局案例1
m0_56517198的博客
02-12 141
移动端开发，基于rem布局。在移动端开发中，由于屏幕空间有限，经常会把一些菜单或功能浮窗隐藏在屏幕一侧，当点击开展按钮时，以滑出的效果呈现内容。点击左上角用户头像时，侧边栏滑出，然后单击右侧区域，侧边栏再滑入。HTML结构主体、遮罩、侧边栏三个部分，而遮罩、侧边栏默认隐藏。//思路：点击人物头像按钮，侧边栏从左侧滑出，遮罩层也显示出来；//侧边栏要从左侧滑出(改变left的值）//点击蒙层，侧边栏滑入，遮罩层隐藏。//侧边栏滑入(改变left的值）//给人物头像按钮绑定事件。//给遮罩层添加点击事件。
移动端前端布局详解与实战项目总结
2. rem布局：通过根元素font-size动态调整元素大小，结合媒体查询实现响应式。 3. flex弹性布局：高度灵活的布局方式，支持动态调整元素顺序和大小。 4. 混合布局：结合多种布局方式以达到最佳效果。 七、实战案例 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值