移动端rem布局 案例练习

最新推荐文章于 2024-04-29 11:17:53 发布
最新推荐文章于 2024-04-29 11:17:53 发布
阅读量294 收藏 2
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MartinYP/article/details/126213948
版权

2022年8月7日 周日学习笔记 。学习时长：3.5h，学习进度：rem适配布局案例练习。

案例效果图：

 H5代码展示：

<body>
    <!-- 顶部搜索框 -->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" value="厨卫保暖季 哒哒哒">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>
    <!-- banner部分 -->
    <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>
    <!-- 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>
</body>

 CSS代码展示：（包括rem适配方案）

a {
  text-decoration: none;
}
html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}
body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height:  1.5;
  font-family:  Arial,Helvetica;
  background:  #F2F2F2;
}
.search-content {
  display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  height: 1.76rem;
  background-color: #FFC001;
}
.search-content .classify {
  width: 0.88rem;
  height: 1.4rem;
  margin: 0.22rem 0.5rem 0.14rem 0.48rem;
  background: url(../images/classify.png) no-repeat;
  background-size: 0.88rem 1.4rem;
}
.search-content .search {
  flex: 1;
}
.search-content .search input {
  outline: none;
  width: 100%;
  border: 0;
  height: 1.32rem;
  border-radius: 0.66rem;
  background-color: #FFF2CC;
  margin-top: 0.24rem;
  font-size: 0.5rem;
  padding-left: 1.1rem;
  color: #757575;
}
.search-content .login {
  width: 1.5rem;
  height: 1.4rem;
  line-height: 1.4rem;
  margin: 0.2rem;
  font-size: 0.5rem;
  text-align: center;
  color: #fff;
}
.banner {
  width: 15rem;
  height: 7.36rem;
}
.banner img {
  width: 100%;
  height: 100%;
}
.ad {
  display: flex;
}
.ad a {
  flex: 1;
}
.ad a img {
  width: 100%;
}
nav {
  width: 15rem;
}
nav a {
  float: left;
  width: 3rem;
  height: 2.8rem;
  text-align: center;
}
nav a img {
  display: block;
  width: 1.64rem;
  height: 1.64rem;
  margin: 0.2rem auto 0;
}
nav a span {
  font-size: 0.5rem;
  color: #333;
}

 rem原理代码示例：

<div>
    <p></p>
</div>

<style>
    html {
        font-size: 12px;
    }
    
    div {
        font-size: 12px;
        width: 15rem;
        height: 15rem;
        background-color: purple;
    }
    
    p {
        /* 1. em相对于父元素 的字体大小来说的 */
        /* width: 10em;
        height: 10em; */
        /* 2. rem 相对于 html元素 字体大小来说的 */
        width: 10rem;
        height: 10rem;
        background-color: pink;
        /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
    }
</style>

 媒体查询代码示例：

<style>
    /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
    /* max-width 小于等于800 */
    /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
    
    @media screen and (max-width: 800px) {
        body {
            background-color: pink;
        }
    }
    
    @media screen and (max-width: 500px) {
        body {
            background-color: purple;
        }
    }
</style>

 媒体查询运用代码示例：

<style>
    /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
    /* 2. 小于540px 页面的背景颜色变为蓝色 */
    
    @media screen and (max-width: 539px) {
        body {
            background-color: blue;
        }
    }
    /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
    /* @media screen and (min-width: 540px) and (max-width: 969px) {
        body {
            background-color: green;
        }
    } */
    
    @media screen and (min-width: 540px) {
        body {
            background-color: green;
        }
    }
    /* 4. 大于等于970 我们页面的颜色改为 红色 */
    
    @media screen and (min-width: 970px) {
        body {
            background-color: red;
        }
    }
    /* 5. screen 还有 and 必须带上不能省略 */
    /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略 */
</style>

 媒体查询案例 代码示例：

 

<body>
    <div class="top">购物车</div>
</body>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    /* html {
        font-size: 100px;
    } */
    /* 从小到大的顺序 */
    
    @media screen and (min-width: 320px) {
        html {
            font-size: 50px;
        }
    }
    
    @media screen and (min-width: 640px) {
        html {
            font-size: 100px;
        }
    }
    
    .top {
        height: 1rem;
        font-size: .5rem;
        background-color: green;
        color: #fff;
        text-align: center;
        line-height: 1rem;
    }
</style>

MartinYP
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
移动端rem布局初步练习
wujimiao的专栏
03-17 1215
渐渐明白，要做就要做高级，现在社会已经不需要实习工，不需要初级员工。如果你培训几个月能够找到相关工作，如果刚毕业什么都不懂能够找到工作，请好好珍惜。因为很多小白给人免费实习别人都嫌碍事，本人亲历。 你不努力，就别想着高工资了，现在没有那个行业竞争不激烈，要做就要做好，否则就不要怪社会不公！ 公司需要适配移动端，只好网上找找教程，请教朋友，才渐渐有些心得体会，小白级别，做个记号。 首先是移动头
苏宁易购 源码
03-17
苏宁易购 源码，
仿照苏宁易购的简单网站制作（包含效果图及其代码）
m0_65054943的博客
07-12 1579
苏宁易购简单网页制作
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
最新发布
weixin_67244432的博客
04-29 1862
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
苏宁易购移动端页面（附源码）
weixin_47627102的博客
10-14 4141
苏宁易购移动端简写首页（附源码） 源码链接：https://pan.baidu.com/s/1CXdE4t30e31Q3eJIGWlbRg 提取码：nbnb 其中有一些属性计算教冗余，建议大家使用vscode然后预装一下Easy LESS，运用less可以大大减少开发时间 以下是效果展示： ...
苏宁易购自适应屏幕移动端
weixin_42583802的博客
05-21 583
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...
移动端REM布局与ViewportVW布局的实例运用
08-10
**一、REM布局** 1. **REM（Root Em）介绍** REM是以根元素（通常是html元素）的字体大小为单位的长度单位。通过调整根元素的字体大小，可以实现整个页面的响应式设计。这种方式允许开发者设定一个基准值，然后...
详解H5 活动页之移动端 REM 布局适配方法
09-27
本文将深入探讨移动端REM布局的适配方法，这是H5活动页实现响应式设计的关键技术。 首先，我们需要理解什么是REM（Root EM）。REM是一个相对于根元素（通常是html元素）font-size的长度单位。这意味着，如果我们...
rem:移动端rem布局
05-09
移动端rem布局rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 ./js/rem.js中 默认设计稿宽度为640 1rem =100px 可自行修改HOW TO USE设置移动端网页专用的viewport meta，至少需要包含width=...
移动端rem布局的两种实现方法
12-03
本文将详细介绍两种在移动端实现rem布局的常见方法：CSS媒体查询和JavaScript动态计算。 ### 方法一：CSS媒体查询 媒体查询是CSS3引入的一种特性，用于定义不同屏幕尺寸下的样式规则。在rem布局中，媒体查询常用来...
仿苏 宁 易 购官网模板html源码-商城网站模板
04-06
高仿苏宁易购商城源码是一套基于php开发的商城高仿应用最新版网站项目源码，实现了首页、搜索页、商品分类页、购物页、个人中心的登录注册、应用设置页面的UI布局模仿。UI仿照度 高达百分之九十.其中包含首页弹出式分类、轮播广告，商品列表页与详细页左侧只显示当前分类下的所有小类，非常不错哦。浏览器兼容性强。实现了几乎所有用户所需要的购物及浏览功能，舒适的体验和美观的ui是网站最大的特色。 商城源码站长在这边已经分享了不少，这款是其中效果比较好的，没有实际测试，但是看过别人搭建的效果是杠杠，下面分享一下部分界面演示图。
苏宁易购 2018 网站源码
04-28
模仿苏宁易购做的java Web项目 模仿苏宁易购做的java Web项目
【jquery mobile】苏宁移动端首页
07-03
html5+css
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...
苏宁移动端首页制作（rem+媒体查询+less）
woshi6yi的博客
03-08 509
苏宁移动端首页制作（rem布局） 技术选型主要是有两种方案 1.less+媒体查询+rem 2. flexible.js+rem（不需要写媒体查询，他将设备屏幕分成了10分，我们只需那根据设计稿确定html字体大小） 知识点：em单位是相对于父级元素的字体大小来说的 rem是相当于html的字体大小来说的 媒体查询语法：@media 设备类型 and/not/only (媒体特性) {css-code；} 针对于不同的屏幕大小我们可以写不同的css文件可通过link+媒体查询调用不同的css 比如 ..
实战CSS：苏宁商城静态实现
KaiSarH
12-18 1538
目标: 实现苏宁商城的静态实现 效果: 代码： 项目结构： index.html <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>current-苏宁易购(itlike.com)-送货更准时、价格更超值、上新货更快</t...
移动端项目-苏宁易购
weixin_45662026的博客
12-01 348
【代码】移动端项目-苏宁易购。
移动端自适应布局 rem
09-01
移动端自适应布局 rem 是一种相对单位，它是相对于根元素(html标签)的字体大小来计算长度的。通过给根元素设置一个基准字体大小（一般是10px），然后使用rem作为其他元素的长度单位，可以使页面中的元素按照比例...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值