移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作

最新推荐文章于 2022-08-07 17:28:10 发布
最新推荐文章于 2022-08-07 17:28:10 发布
阅读量691 收藏 4
点赞数 2
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45103612/article/details/109557345
版权

一、技术选型

在这里插入图片描述

二、搭建相关文件夹结构

在这里插入图片描述

三、设置视口标签以及引入初始化样式

在这里插入图片描述

四、设置公共common.less 文件

在这里插入图片描述

common.less

//设置常见的屏幕尺寸大小，修改里面的html 文字大小
//因为在 pc 端也可以打开苏宁的移动端网页
//我们默认字体大小为 50 px 
html {
    font-size: 50px;
}
//注意：这句话一定要写在最上面

//定义划分的份数 15等份
@no:15;
//320 大小的屏幕
@media screen and (min-width:320px){
    html{
        font-size: 320px / @no;
    }
}

//360 大小的屏幕
@media screen and (min-width:360px){
    html{
        font-size: 360px / @no;
    }
}

// 375 大小的屏幕 iPhone6/7/8的屏幕大小尺寸
@media screen and (min-width:375px){
    html{
        font-size: 375px / @no;
    }
}

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

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

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

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

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

五、新建index.less文件

在这里插入图片描述

index.less

//导入 common.less文件
@import "common";
//文件后缀名可写可不写

index.html

 <link rel="stylesheet" href="css/index.css">

六、苏宁首页 body 样式设置

body {
    min-width: 320px;
    width: 15rem;
    //750像素下，一个rem就是 html的 font-size 也就是 50px 
    //那么15rem就是 750px，
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #F2F2F2;
}

七、苏宁首页 search-content 模块布局

index.html

<body>
 <!-- 顶部部分   -->
 <div class="search-content">123</div>
</body>

index.less

// 顶部模块
// 页面元素rem计算公式： 页面元素的px / html 字体大小 50
@baseFont:50;
.search-content{
    height: 88rem / @baseFont;
    width: 15rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFC001;
}

在这里插入图片描述

八、苏宁首页 search-content 内容布局

index.html

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

index.less

@baseFont:50;
.search-content{
    height: 88rem / @baseFont;
    width: 15rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFC001;
    display: flex;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        background-color: pink;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
    }
    .search {
        flex: 1;
        background-color: purple;

    }
    .login {
        width:75rem / @baseFont ;
        height: 70rem / @baseFont;
        background-color: blue;
        margin: 10rem / @baseFont;
    }
}

在这里插入图片描述

九、苏宁首页 search-content 内容制作

index.html

 <div class="search-content">
     <div class="classify"></div>
     <div class="search">
        <form action="">
            <input type="search" value="双十一预售 定金10倍翻">
        </form>
     </div>
     <div class="login">登录</div>
</div>

index.less

@baseFont:50;
.search-content{
    height: 88rem / @baseFont;
    width: 15rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFC001;
    display: flex;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        // background-color: pink;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background: url(../images/classify.png) no-repeat;
        background-size: 44rem / @baseFont 70rem / @baseFont;

    }
    .search {
        flex: 1;
        // background-color: purple;
        input {
            width: 100%;
            height: 66rem / @baseFont;
            background-color: #FFF2CC;
            border-radius: 33rem / @baseFont;
            margin-top: 12rem / @baseFont;
            padding-left: 55rem / @baseFont;
            font-size: 25rem / @baseFont;
            outline: none;
            border: 0;
            color: #757575;
        }
    }
    .login {
        width:75rem / @baseFont ;
        height: 70rem / @baseFont;
        // background-color: blue;
        margin: 10rem / @baseFont;
        font-size: 25rem / @baseFont;
        color: #ffff;
        text-align: center;
        line-height: 70rem / @baseFont;
    }
}

在这里插入图片描述

十、banner 和 广告内容制作

index.html

<!-- 广告部分 -->
<div class="ad">
    <a href=""><img src="upload/ad1.gif"/></a>
    <a href=""><img src="upload/ad2.gif"/></a>
    <a href=""><img src="upload/ad3.gif"/></a>
</div>

index.less

// 广告部分
.ad {
   display: flex;
   a {
       flex: 1;
       img{
           width: 100%;
       }
   }
}

在这里插入图片描述
可实现自适应效果
在这里插入图片描述

十一、nav内容制作

index.html

<!-- nav 部分 -->
<nav>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手机</span>
    </a>

</nav>

index.less

// nav 部分
nav {
    width: 750rem / @baseFont;
    a {
        float: left;
        width: 150rem / @baseFont;
        height: 140rem / @baseFont;
        text-align: center;
        img {
            display: block;
            width: 82rem / @baseFont;
            height: 82rem / @baseFont;
            margin: 10rem / @baseFont auto 0;  
        }
        span {
            font-size: 25rem / @baseFont;
            color: #333;
        }
    }
}

在这里插入图片描述

杨贵妃会飞飞飞
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
移动WEB开发 rem适配布局
Ulrica_Amaris的博客
03-19 287
rem基础 rem 单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 <style> div { font-size: 12px; } p { width: 10em; /*120px*/ height: 10em;
移动端布局-rem适配布局
weixin_49455047的博客
12-12 776
一.rem基础 rem单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小 不同的是rem的基准是相对于html元素的文字大小 比如根元素（html）设置flont-size=12px；非根元素设置width：2rem，则换成px表示就是24px em单位，在当前元素设置了font-size时,以当前元素为参照，当前元素没有设置font-size，则以父元素为参照 二.媒体查询 2.1什么是媒体查询 媒体查询（media query）是css3新语法 使用@m
移动端rem布局 案例练习
MartinYP的博客
08-07 294
学习记录博客
移动web实现响应式布局（rem）
想好了再写！
12-28 277
rem单位： rem（root em）是一个相对单位，类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如：根元素（html）设置font-size = 12px；非根元素设置width：2rem;则换算成px表示24px。 媒体查询 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器的大小过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多的苹果手机，安卓手机，平板灯设备都用
rem布局案例
DcTbnk的博客
03-09 526
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
移动Web开发之 rem适配布局----苏宁首页案例制作
06-23
综上所述，“苏宁首页案例制作”是一个很好的实践rem适配布局的机会，通过合理的rem应用，我们可以创建一个既美观又具有高度适应性的移动Web页面。在实际项目中，不断测试和调整，才能打造出优秀的移动用户体验。
移动web开发-rem布局案例源码，html+css素材
02-16
这种布局方式能够确保在不同屏幕尺寸和设备上提供一致的视觉体验，特别是在处理小屏幕设备时，如手机和平板电脑。 首先，我们要理解REM的概念。EM单位是相对于父元素的字体大小的单位，而REM则是相对于整个文档的根...
移动web开发---rem适配案例---优惠券.rar
11-06
本案例“移动Web开发---rem适配案例---优惠券”深入探讨了如何使用rem单位进行页面自适应布局，以确保在不同屏幕大小的手机和平板上都能呈现出良好的视觉效果。下面将详细介绍rem单位、适配策略以及两种实现方式——...
移动WEB开发_rem布局01-rem单位.html
04-14
移动WEB开发
移动端布局之动态rem的实现
01-19
动态rem 1. 首先我们先介绍当下的长度单位 px 像素 em 一个M的宽度 / 一个汉字的宽度 1em == 自身的 font-size rem 全称 root em 是根元素（html)的 font-size vh 全称 viewport height 100vh == 视口高度 vw 全程 ...
移动端rem布局 demo，可以作为简单参考
06-13
其中有一些不足，还有由于时间原因部分css3动画没有加载完全js方面也稍差了些，但我觉得给rem布局换算比较懵的同学能有个好的参考了
移动WEB开发之 rem适配布局 rem单位；媒体查询；Less（CSS预处理器）；flexible淘宝开发的插件
m0_55170432的博客
04-14 465
--------------------- rem 基础 ------------------ 1.1 rem 单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 /根html 为 12px
移动前端自适应适配布局解决方案和比较
嘿嘿
03-18 295
互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem 淘宝最近开源的一个框架和网易的框架有同工之异。都是采用rem实现一稿解决所有设置自适应。在没出来这种方案之前，第一种做法的人数也不少。类似以下说到的拉钩网。看一下流云诸葛的文章。 以下摘自：从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些web app并一定很复杂，比如
web前端开发之rem布局
Web_chicken的博客
01-14 5757
1.rem布局 1.1 em和rem rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em: em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN em可以让页面更灵活，比起写死的px值，em更有张力，改动父元素的字体大小，子元素会等比例变化，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值 em做弹性布局的缺点还在于牵
rem移动端布局方案解析+案例
qq_40463625的博客
02-25 1415
rem移动端布局方案解析+案例
【CSS】872- 浅析rem布局方案
pingan8787
02-17 196
一些像素概念物理像素：即实际的每一个物理像素，也就是移动设备上每一个物理显示单元（点）设备逻辑像素（css中的px）：可以理解为一个虚拟的相对的显示块，与物理像素有着一定的比例关系，也就是...
rem布局和响应式布局
weixin_46048542的博客
08-29 960
rem布局 单位： em是一个相对单位，1em等于当前元素或父元素的font-size值 rem是一个相对单位，1rem等于根元素的font-size值 vw/vh把屏幕分为100份，1vw等于屏幕宽的1% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
CSS day12 移动端布局练习
qq_34620296的博客
09-13 729
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
postcss-px2rem postcss用于web端怎么样 rem适配方面的
最新发布
07-28
postcss-px2rem 是一个 PostCSS 插件，用于在 Web 端实现 REM 适配方面的布局。以下是使用 postcss-px2rem 进行 REM 适配的步骤： 1. 安装依赖：首先需要在项目中安装 postcss-px2rem 插件。可以使用 npm 或 yarn ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值