（精中求精） rem适配布局

最新推荐文章于 2024-08-15 17:20:30 发布
最新推荐文章于 2024-08-15 17:20:30 发布
阅读量4.2k 收藏 19
点赞数 6
文章标签： 前端 css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LOxia/article/details/123723334
版权
本文详细介绍了适配布局的概念，强调了rem相对于flex和流式布局的优势，以及如何通过rem+less+媒体查询实现屏幕适配。讲解了rem和em的区别，解释了为何使用rem进行布局，并给出了确定不同屏幕宽度下html字体大小的方法。媒体查询的使用规范和通用代码示例也进行了展示。此外，还介绍了less工具简化CSS编写，并通过苏宁移动端布局案例，展示了如何在实践中应用这些知识。
摘要由CSDN通过智能技术生成

1.适配导读：

什么是适配布局？与flex或者流式布局又有什么区别？

所谓的适配布局，是让页面盒子的高度，宽度，内外边距，边框大小，文字的大小，定位的元素位置等能够根据屏幕宽度自动改变大小和位置，从而达到对不同的屏幕都能够做到最完美的展示，这就是rem适配布局的优秀地方。

flex和流式布局，主要针对盒子的宽度，仅能够做到宽度自适应屏幕，但是存在高度无法改变的缺陷，rem正好补全这一点。

以后的布局，不会是只用flex或者只用流式布局、rem布局，而是混合布局，flex布局做排版，rem做自适应屏幕。

最后的最后我会放上苏宁的案例，供大家理解flex+less+rem布局的完美

2.适配布局的方法：

1.rem + less +媒体查询

2.flexible.js + less +rem

本次重点在第一种方法

3.适配布局基础知识导读

1.初识rem em

1.rem 与 em ？

为什么放一块讲？ rem 和 em都是相对单位，不同的地方在于 rem相对html的字体大小来确定 1rem = html的font-size em根据自身，如果自身没有设置字体大小，那么就会寻找最近具有字体大小的父盒子

2.为什么用rem

正是因为rem只根据html的字体大小有关，所以只要在不同的屏幕下，只要更改html的字体大小，就可以控制1rem = 多少，将盒子的高宽等 用px的地方都改为rem， 达到改变html字体大小从而改变整个页面的大小，达到适配效果。

2.html的字体大小的确定

rem的难点在于如何确定不同屏幕宽度下的html的字体大小问题？

先讲思路：

1.根据设计稿，将屏幕划分成10 / 15 /20 / 30 / 40份，选一个自己喜欢的，或者领导要求的份数

2.假设此时设计稿是750px 我们将设计稿分为15份 那么 每一份的大小为 50px

3.所以此时 我们只需要设置在750屏幕及以上，字体大小为50px

4.确定好份数后， 750px下，html字体大小为 50 450px下呢？

5.450px下 html字体大小 450 /15 = 30px

6.540px ？ 540 / 15 = 36px

7.总结，html字体大小 = 屏幕宽度 / 确定划分的份数

下面列出几个问题？

为什么html字体大小 = 屏幕宽度 / 确定划分的份数？

因为我们要实现等比例的缩放 所谓的等比例，是屏幕宽度 与 html字体大小的比例 永远是 份数 ： 1 这样才能够实现等比缩放。

如果750px下 字体大小为 50px 500px 屏幕下 字体大小为 20px 合适吗？ 缩放也不会同步吧！

3.媒体查询

1.语句规范

1.如果界面的盒子摆放位置不变，那么媒体查询写在css中，如果是内嵌式，需要写在style内部 如果是外链式，需要写在css文件里

规范：

@media screen（手机，平板，pc端）/all （全部）/print（打印机） and （条件语句）

内容虽多，但是需要我们记住的就是下面这种类型！

@media screen and (max-width:540px)

2.如果界面的盒子位置需要改变，那么就需要写不同的css样式，媒体查询此时作用就是通过查询屏幕宽度，选择不同的样式 此时的书写方式

<link rel="stylesheet" href="./style780.css" media=" screen and (min-width:780px)">

2.媒体查询通用代码：

主要适配的屏幕宽度有：320px 360px 375px 384px 400px 414px 424px 480px 540px 720px 750px

@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;
  }

4.less使用

1.less介绍

less是帮助我们书写css的工具 帮助我们简化书写css样式的复杂性，最直接的就是不用再书写很长的父级变量名 而且less中可以定义变量，后期更易于维护代码。如若将颜色 字体大小 份数 定义为变量，那么我们只需要改变变量的值就可以实现全局的更改。

2.less的使用

后缀 .less

在less中写代码，后代写在父亲的大括号内 如果想要用结构伪类 伪元素，需要在前面加&

使用如图：

要求：第一个p 颜色是红色 第二个p里面的a鼠标经过变成红色 box里面的文字是绿色

html结构：
<body>
    <div class="box">
        <p>
            我是第一个p标签;
        </p>
        <p>
            <a href="#">我是第二个p标签</a>
        </p>
        <div class="box2">
            hello
        </div>
    </div>
</body>
less语句：
.box {
   p {
        &:first-child {
            color: red;
        }

        &:nth-child(2) {
            a {
                color: blue;

                &:hover {
                    color: red;
                }
            }
        }
    }

    .box2 {
        color: green;
    }
}

以上就是rem适配布局的全部基础内容

4.苏宁移动端布局

1.搭建文件夹结构

 

2.index.html中引入normalize.css基础样式，设置视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, 
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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

3.less中书写媒体查询

通常我们把媒体查询写在common.less中

// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
    text-decoration: none;
    color: #333;
}

// 我们此次定义的划分的份数 为 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);
    }
}

4.index.less中设置body基础

body {

  *width*: 15rem;

  *min-width*: 320px;

  *font-family*: Arial, Helvetica;

  *margin*: 0 auto;

}

5.代码结构模块划分

 

6.代码书写

index.less代码：

body {
    width: 15rem;
    min-width: 320px;
    font-family: Arial, Helvetica;
    margin: 0 auto;
}

@basefont : 50px;

// 顶部搜索模块
.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    height: (88rem / @basefont);
    width: 15rem;
    background-color: #FFC001;

    .classify {
        width: (44rem / @basefont);
        height: (70rem / @basefont);
        background: url(../images/classify.png) no-repeat;
        background-size: (44rem / @basefont) auto;
        margin: (11rem / @basefont) (25rem / @basefont) (7rem / @basefont) (24rem / @basefont);
    }

    .search {
        flex: 1;

        input {
            height: (66rem / @basefont);
            width: 100%;
            border: 0;
            outline: 0;
            border-radius: (33rem / @basefont);
            margin-top: (12rem / @basefont);
            background-color: #FFF2CC;
            font-size: (25rem / @basefont);
            padding-left: (55rem / @basefont);
            color: #757575;
        }
    }

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

// banner模块
.banner {
    img {
        width: 100%;
    }
}

//ad模块
.ad {
    display: flex;

    a {
        flex: 1;

        img {
            width: 100%;
        }
    }
}

//nav模块
.nav {
    display: flex;
    flex-wrap: wrap;

    a {
        flex: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: (25rem / @basefont);

        span {
            margin: (10rem / @basefont) 0 (20rem / @basefont);
        }


        img {
            width: (82rem / @basefont);
        }
    }
}

index.html结构

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, 
 	initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>suning </title>
</head>

<body>
    <!-- 顶部搜索模块 -->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <!-- action 必需的 action 属性规定当提交表单时，向何处发送表单数据。 -->
            <form action="#">
                <input type="search" value="厨卫保暖季 哒哒哒">

            </form>

        </div>
        <a href="#" class="login">登录</a>
    </div>
    <!-- banner模块 -->
    <div class="banner">
        <a href="#">
            <img src="./uploads/banner.gif" alt="">
        </a>
    </div>
    <!-- 广告部分 -->
    <div class="ad">
        <a href="#"><img src="./uploads/ad1.gif" alt=""></a>
        <a href="#"><img src="./uploads/ad2.gif" alt=""></a>
        <a href="#"><img src="./uploads/ad3.gif" alt=""></a>
    </div>
    <!-- nav模块 -->
    <div class="nav">
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
        <a href="#">
            <span><img src="./uploads/nav1.png" alt=""></span>
            爆款手机
        </a>
    </div>
</body>

</html>

最后补充：

1.需要下载的插件：easyless less保存自动生成css文件

2.less中引入其他less文件 @import ‘文件名.less’ 要点 一定要有空格，文件名要用引号包裹

3.剩余的flexible.js 使用 下次再做补充

小羊卷
关注
rem适配布局
qq_46492364的博客
04-11 425
文章目录前言一、rem单位二、媒体查询1.媒体查询书写语法2.媒体查询案例-背景变色3.媒体查询+rem，实现动态元素大小变化4.引入资源三、维护css弊端1.css的弊端2.维护css弊端（Less的简介和安装）3.Less变量4.Less编译5.Less嵌套6.Less运算四、rem适配1.rem适配原理2.rem适配方案总结 前言 这部分开学习rem适配布局，能够解决移动端网页高度和文字大小随着网页窗口的变化而变化。接下来开始学习吧 一、rem单位 （1）em单位:相对单位，参考的是父级元素字号大
DSP精选课件（精中求精）
01-09
【DSP精选课件（精中求精）】是一份针对数字信号处理（Digital Signal Processing，简称DSP）领域的高质量教学资源，由具有丰富工程实践经验的教师精心编排。这份课件的特点在于结合了大量的实际工程案例，使得理论...
rem的适配
weixin_47012279的博客
12-07 1247
rem是相对长度单位，相对于html元素(根元素)font-size计算值的倍数的css单位。简单理解：1rem = html的font-size值（px）eg: html{ font-size:10px; } div{ font-size:1rem;//实际 1*10px=10px } 2、适配原理 js设置 html标签的font-size = 移动设备宽度/设计稿宽度 * 100 + "px"具体：移动设备宽度/设计稿宽度 是渲染效果相对于设计稿的缩放比 ==》
大屏REM适配方案
最新发布
Black_Kiven的博客
08-15 1677
如何使用rem适配大屏，此文章能教你一个很棒的适配方式
rem 适配
WY_ALA的博客
02-21 1097
rem 适配
论文研究 - 大孔树脂从曲霉精中分离和纯化乌索酸
05-28
使用五种大孔树脂研究了从锁阳提取物中乌索酸的富集和纯化。 静态测试表明D101树脂是合适的，其吸附数据与Langmuir和Freundlich等温线拟合得很好。 为了优化分离过程，进行了动态吸附和解吸测试。...
同忻选煤厂矸石溜槽管道耐磨技术的改造
05-18
针对选煤厂矸石脱介筛入料管路输送的流体组分较为复杂,管道局部磨损严重的情况,为了提高选煤厂矸石管路的使用寿命,延长矸石脱介筛筛板的更换周期。通过分析物料流动的方向和冲击位置,对工艺管路进行了重新设计改造,...
CAD技术相关软件开发论文.doc
09-21
CAD技术相关软件开发论文是关于暖通行业计算机辅助设计技术的发展概况、布局特点和困扰CAD技术向应用性普及的因素的论文。论文首先介绍了计算机在暖通行业中的应用概况，然后讨论了CAD技术在设计院中的应用，包括...
详解rem 适配布局
12-13
当今手机种类繁多 且不说iphone系列，安卓手机的种类已经数不胜数了，所以不可能每一款手机都要写一套布局样式，这也是不可能做到的，但是对于越来越精益求精的前端来说 ，当然要找到一个合理的解决方案。rem 就是用来自适应布局的。 适配要达到的效果，如下图（简单的示范一下） 两个div不论在大屏还是小屏上都是占据屏幕的一半 虽然上面这种简单的使用百分比可以实现但是，百分比无法实现字体的自适应，百分比转换成相应的尺寸还是很难的。接下来就说说这次我们的主角 rem （我们一般只适配宽度） rem 原理解析 首先rem是一个相对于根元素fontSize大小的相对单位，也就是说 1rem 等于 htm
rem适配
小胡谈前
04-11 833
rem适配 将代码放在页面的head里面，该适配专门针对750宽度的UI设计稿，如果是640的设计稿只需要将750改成640即可，实际页面中的单位就是除以100即可。 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orienta...
REM适配
weixin_47328526的博客
04-05 1811
适配需要用到两个插件
【HTML CSS】笔记11日 移动WEB开发之rem适配布局
林见鹿鸣
11-19 224
1. rem 基础 rem 单位 em相对于父元素的字体大小来说的，em是父元素字体大小。 rem（root em）是一个相对单位，类似于em，但它是相对于 html元素字体大小来说的。 rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。 例如，根元素（html）设置font-size=12px;非根元素设置width: 2rem;则换成px表示就是24px。 <style> html { font-size: 12..
提升块煤产率：龙山选煤厂技术改造实践
这些改进措施实施后，选煤厂的块煤产率整体提高了1.74%，其中精中块的产率提高了0.51%，精小块的产率提高了1.23%。这意味着每年可以带来238.68万元的额外经济效益。这些成果体现了选煤工艺优化对于提高煤炭资源利用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值