移动端三种布局方式之rem布局-苏宁首页（技术方案一：less、rem、媒体查询）

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

结果图

在这里插入图片描述

  • em是相对于父元素的字体大小来说的，rem（root em）是相对于html元素来说的，
  • less编译器的使用 css样式写在less文件里 自动生成css文件 后续方便修改 和rem布局搭配使用
  • rem实际开发啊适配方案1
    元素大小的取值：（1）页面元素的rem值=页面元素之（px）/（屏幕宽度/划分的份数）
                       (2)屏幕宽度/划分的份数就是html font-size的大小

 
 

每个rem布局+less编译器使用的通用步骤

第一步在这里插入图片描述
 
 

第二步
在这里插入图片描述

// 设置常见的屏幕尺寸 修改里面的html文字大小
// 一定要写到最上面，如果是pc端打开，就是显示这个
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 iphone 678
@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;
    }
}

 
 
第三步
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
第四部 body样式

body{
    min-width: 320px;
    // 模仿苏宁页面，不写最大宽度
    // 750/15
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background-color: #f2f2f2;
}

 
 

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
    <!-- 移动端的初始化样式 -->
    <link rel="stylesheet" href="css/normalize.css">
<!-- 引入常见屏幕尺寸写入公共样式，列表页详情页等等每个页面都要用 -->
<!-- 不需要引入common.css文件 -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 顶部搜索框 -->
    <div class="search-content">
        <a href="" class="classify"></a>
        <div class="search">
            <form action="">
                <!--  -->
                <input type="text" 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="" id=""><img src="upload/ad1.gif" alt=""></a>
        <a href="" id=""><img src="upload/ad2.gif" alt=""></a>
        <a href="" id=""><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>
</html>

 
 
css

// 首页的样式less文件
@import "common";
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
// link 是把一个 样式文件引入到 html页面里面
body{
    min-width: 320px;
    // 模仿苏宁页面，不写最大宽度
    // 750/15
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background-color: #f2f2f2;
    
}
// 固定定位要有宽度，宽度和父盒子一样，可以根据屏幕自适应，高度也是
// 定义一个变量50修改起来方便
@baseFont:50;
.search-content{
    // 子元素用了flex布局,行内元素块元素都默认一行显示
    display: flex;
    // 固定定位，相对于浏览器
    position: fixed;
    top: 0;
    left:50%; 
    transform: translateX(-50%);
   width: 15rem;
//    88px,页面元素算法：页面元素px/html字体大小
// 注意除法运算在less里面要用括号括起来
   height: (88rem / @baseFont);
   background-color: #ffc001;
//  子盒子写在父盒子里，是less编辑器的做法
   .classify{
    width: (44rem / @baseFont);
    height: (70rem / @baseFont);
    // margin: 11px  25px 7px 24px;转化成rem
    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;   
       input  {        
        //    这个输入框不会盖住登录
           box-sizing: border-box; 
        //    去掉默认蓝色边框
           outline: none;
           width: 100%;
        // 去掉边框
           border: 0;
        height: (66rem / @baseFont);
        // 高度的一半
        border-radius:(33rem / @baseFont) ;
        background-color: #fff2cc;
        margin-top:  (12rem / @baseFont);
        padding-left: (55rem / @baseFont);
        font-size: 25px;
       color:#757575;

       }

   }
   .login{
    //    水平垂直居中
    width: (75rem / @baseFont);
    height: (70rem / @baseFont);
    line-height:(70rem / @baseFont) ;
    margin: (10rem / @baseFont);
    //    font-size: 25px;
    font-size: (25rem / @baseFont);
    text-emphasis: center;
    color: #fff;

   }
}

.banner{
    width: (750rem / @baseFont);
    height: (368rem / @baseFont);
    // 图片根据屏幕大小自适应
    img {
        width: 100%;
        height: 100%;
    }
}
.ad{
    // 子元素三张图片链接各占一份
    display: flex;
    a{
        flex: 1;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
// nav
nav{
   width:(750rem / @baseFont) ;
   a{
       float: left;
       width:(150rem / @baseFont) ;
    height:(140rem / @baseFont) ;
    img{
        // 转成块级元素，才可以左右居中对齐
        display: block;
        width:(82rem / @baseFont) ;
        height:(82rem / @baseFont) ;
        margin: (10rem / @baseFont) auto 0;
    
   }
   span {
    font-size: (25rem / @baseFont);
    color: #333;
   }   
}
}
JadeDu_
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动Web开发之 rem适配布局----苏宁首页案例制作
06-23
移动Web开发中的“rem适配布局”是一种针对不同屏幕尺寸和分辨率进行自适应设计的方法，主要应用于智能手机和平板电脑等移动设备。在这个“苏宁首页案例制作”中，我们将深入探讨如何利用rem单位来构建响应式的网页...
（精中求精） rem适配布局
LOxia的博客
03-24 4180
rem适配布局极为详细，含苏宁案例代码
移动端布局(三) rem布局及原理
androidioskl的博客
02-17 9754
什么是rem 首先来了解一下什么是em: 作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小。 s1、s2、s5、s6的font-size和line-height分别是多少px? <div class="p1"> <div class="s1">1</div> <div class="s2">1</div> </div> <div class="p2">
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
最新发布
weixin_67244432的博客
04-29 1788
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
移动WEB开发之-REM（rem）布局
m0_60237095的博客
03-21 3640
目录 移动WEB开发之REM布局 rem基础 rem单位 媒体查询 什么是媒体查询 媒体查询语法规范 1.mediatype 查询类型 2.关键字 3.媒体特性 4.媒体查询书写规则 less 基础 维护css弊端 Less 介绍 Less 嵌套 Less 运算 rem适配⽅案 rem实际开发适配⽅案 总结： 苏宁⾸⻚ 1、 技术选型 2、搭建⽂件结构 3、设置视⼝标签以及引⼊初始化样式 4、设置公共common.less⽂件 移动WEB开发之REM布局
rem布局
2301_79093124的博客
08-28 1065
rem布局就是让页面中的元素可以做到自适应，当设备大小发生改变时，等比例适配当前的设备。页面元素使用rem做尺寸单位。
HTML、CSS 知识点总结
sinat_39145919的博客
12-11 462
HTML、CSS面试要点总结
移动端项目，仿苏宁移动端（rem+less+媒体查询）
11-10
此项目开发采用的技术：html5、css3、rem、less、媒体查询、二倍精灵图 采用的字体图标是阿里icon 采用淘宝开发的flexble.js自动计算rem 项目只有首页，适应各种移动端尺寸
仿京东移动端首页布局（固定尺寸、rem适配、vw适配）
08-23
仿京东移动端首页布局，包括固定尺寸布局、rem适配布局、vw适配布局，设计稿尺寸使用的iPhoneXR的414px * 896px。 我们可以通过在不同移动端设备上展示移动端网页，发现固定尺寸布局的不足之处，以及rem适配、vw适配...
前端：利用rem布局完成简易首页制作
07-09
本教程将详细介绍如何利用REM布局来制作一个简易的首页。 首先，我们需要理解REM单位。REM是相对于根元素的字体大小的单位，如果html元素的font-size设置为20px，那么1rem就等于20px。通过调整根元素的font-size，...
移动端布局之动态rem的实现
01-19
动态rem 1. 首先我们先介绍当下的长度单位 px 像素 em 一个M的宽度 / 一个汉字的宽度 1em == 自身的 font-size rem 全称 root em 是根元素（html)的 font-size vh 全称 viewport height 100vh == 视口高度 vw 全程 ...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 883
<!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-...
CSS -- 10. 移动WEB开发之rem布局
Qlz的博客
12-21 828
移动WEB开发之rem布局 1 rem基础 2 媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.3 mediatype 查询类型 2.4 关键字 2.5 媒体特性 2.6 案例：根据页面宽度改变背景颜色 2.7 媒体查询+rem实现元素动态大小变化 2.8 针对不同的屏幕尺寸引入不同的样式文件 3 Less基础 3.1 维护css的弊端 3.2 Less介绍 3.3 Less的变量 3.4 Less的编译 3.5 Less的嵌套 3.6 Less的运算 4 rem适配方案 4.1 rem实际开发适配
移动端页面开发适配 rem布局原理
风中追风
03-19 4516
我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；设备独立像素(density-independent pixel)
Rem布局
ZWTLF的博客
03-08 1773
Rem布局？什么东西？？？Rem布局又称等比缩放布局，是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现，一种通过JavaScript实现；还有一种通过vw实现。在这里小编主要讲述第二种方式。 下面小编先简单的说一下rem布局的优缺点： 优点：在不同的设备下看起来比较协调，内容会随着设备屏幕的大小进行等比缩放。 缺点: 随着屏幕的变大或缩小不会展现更多的内容。 它的优缺点小编就说的...
rem布局的原理
qq_43036190的博客
02-09 2288
rem的布局原理 一、什么是rem？ rem是css的一个相对单位，他是相对于html的根元素 例如：html{font-size:16px;} p{font-size:1rem;} 那么段落的字体大小为16像素 二、怎么根据屏的大小做到自适应的？ 自适应的原理： *可以通过检测屏幕大小改变html的字体大小，从而实现自适应的大小效果* 获取设备宽度与设计搞的宽度的设计比例，作为html font...
rem 布局
qq_51449345的博客
11-09 326
rem 布局 流式布局、flex布局在宽度上控制的布局，高度写死； rem布局，最为直观的效果，页面全部元素现实等比缩放，包括文字，盒子大小； rem 单位 rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制； 语法 root: 1rem=HTML的font-size大小； 语法： /* 1.根html 为 15px */ html { font-size: 15px; } /* 2.此时 div 的
移动端开发——rem布局
DS153的博客
09-15 1785
目录 前言 一、rem布局 二、rem的基础知识 三、媒体查询 1.媒体查询的使用语法 （一）mediatype 媒体类型 （二）关键字 （三）媒体特性 2.媒体查询和rem组合 3.引入样式 四、适配方案 1.技术方案1 （一）设计稿常见尺寸宽度 （二）动态设置html标签font-size 大小 （三）元素大小取值方法 2.技术方案2 总结 前言 在经过之前的flex布局之后，我们发现flex虽然有很多好处，但是存在一些没办法解...
--fs-1: 7rem; --fs-2: 4.5rem; --fs-3: 3.6rem; --fs-4: 2.4rem; --fs-5: 2.2rem; --fs-6: 2rem; --fs-7: 1.6rem; --fs-8: 1.5rem; --fs-9: 1.4rem; --fs-10: 1.3rem; --fs-11: 1.2rem; --fw-500: 500; --fw-600: 600; --fw-700: 700; --fw-800: 800;这个是定义什么
06-12
这是 CSS 中使用自定义属性（CSS Variables）来定义一些字体大小和字重的变量。 其中，以 `--fs-` 开头的变量用来定义不同级别的字体大小，例如 `--fs-1` 定义了最大的字体大小为 7rem，而 `--fs-11` 则定义了最小的字体大小为 1.2rem。 以 `--fw-` 开头的变量则用来定义不同级别的字重，例如 `--fw-500` 定义了字重为 500，而 `--fw-800` 则定义了字重为 800。 定义这些变量有助于在代码中统一管理字体大小和字重，方便后续的维护和修改。在需要使用这些变量的时候，可以通过 `var()` 函数来引用这些变量，例如： ```css h1 { font-size: var(--fs-1); font-weight: var(--fw-700); } ``` 这会将 h1 元素的字体大小设置为 `--fs-1` 定义的值（即 7rem），字重设置为 `--fw-700` 定义的值（即 700）。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值