精华内容
下载资源
问答
  • rem适配
    2022-05-16 20:52:01

    移动端网页宽度几乎全为移动设备屏幕宽度的100%,而每个移动端设备的屏幕又有着各不相同的宽度。 为了使页面在在不同的移动设备上能够保持统一的显示效果,这个时候就需要为移动端网页进行适配了。

    移动端的适配方案有很多种,比如百分比布局,弹性和rem.vh 布局。

    flex + rem单位 做适配效果 (比如淘宝和小米移动端) 当前市场最多
    flex + viewport width /vh单位 做适配效果 (比如 B站移动端 ) 新兴,马上的一个趋势

    rem 适配

    rem 单位

    rem 是一个相对单位,1rem 就是 html 文字的大小

    比如:

    html {
        font-size: 35px;
    }

    则此时 1rem 就是 35像素。
     

    媒体查询

    媒体查询 mediaquery 可以自动检测视口的宽度。

    媒体查询一个非常大的作用是:根据屏幕宽度修改html文字大小

    使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ,就完成了适配

    语法:

    @media (width:375px) {
        html {
            font-size: 40px;
        }
    }
    
    @media (width:320px) {
        html {
            font-size: 30px;
        }
    }

    flexible.js

    媒体查询写起来超级麻烦,而且检测不够精确,因此我们使用 flexible.js 这个 js文件,通过js 实时检测屏幕窗口的变化实现检测视口宽度。

    这个也是值得提倡使用的一种方式。

    这个js文件可以自动检查屏幕宽度和自动修改html文字大小。这样就可以让盒子配合rem完成适配。

    <script src="./js/flexible.js"></script>

    LESS

    less 可以帮我们把px单位转换到rem单位。

    Less是一个CSS预处理器, Less文件后缀是.less

    扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

    less 运算

    .box {
     
      // 注意:单位的转换 计算的时候以第一个单位为准
      height: (100 / 37.5rem);
     
    
    }

    通过js文件将屏幕的宽度自动修改html文字也就是rem的大小后,再使用less将我们想要实现的长度转换为实时变化的rem单位后就可以实现移动端网页内容的适配了。

    我们的需求的是要做移动端适配: 页面中的元素尺寸跟随屏幕宽度等比例缩放(适当调整大小)

    方案如下:

    flex + rem + flexiable.js + less

    1. 我们移动端采取 flex 布局

    2. rem单位: 做移动端适配的。

      • rem相对单位,跟html文字大小有关系

    3. 媒体查询: 检测屏幕的视口宽度

    4. flexiable.js :可以根据屏幕的宽度自动修改html文字大小

    5. less: less让我们的css具有了计算能力

      • less 可以让我们很方便的 把 px 转换为 rem

    ​​​​​​​

    更多相关内容
  • 全网最好用rem适配文件
  • 主要给大家介绍了关于rem适配的3种常用封装,文中通过示例代码介绍的非常详细,对各位前端开发者们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 详解rem 适配布局

    2020-09-22 12:24:00
    当今手机种类繁多,所以不可能每一款手机都要写一套布局样式,rem 就是用来自适应布局的,本文就详细的介绍了rem 适配布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • REM适配

    2022-04-05 17:09:01
    适配需要用到两个插件

    要根据屏幕的变化进行适配 两件事需要做

    1. 需要把px 转化成rem

    2. 需要根据当前的屏幕的变化调整当前font-size的大小

    Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具

    • postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem,我们开发时,原来怎么写 现在还怎么写,会自动转成rem

    通过postcss-pxtorem转化的时候,需要设置一个基准值, font-size: 30px => rem ? 30px / 基准值 = rem值

    移动端适配的时候,一般以iphone6的屏幕宽度的十分之一 作为基准值 37.5

    • font-size: 30px => font-size: 30px /基准值 rem

    • lib-flexible 用于动态设置 rem 基准值

    首先,需要安装:

    开发阶段 直接 将px => rem

    # 后处理器 开发阶段使用 
    $ npm i postcss-pxtorem -D
    $  yarn add  postcss-pxtorem --dev

     需要对pxtorem插件进行配置,需要在项目的根目录下 建立一个 postcss.config.js文件, 这个文件是默认的文件名, 进行配置

    // 此文件专门处理postcss插件
    module.exports = {
      // 所有的postcss插件
      plugins: {
        //   自动给css样式加前缀的属性 display:flex  => 自动其他浏览器的前缀
        autoprefixer: {},
        'postcss-pxtorem': {
          rootValue: 37.5, // 基准值 font-size: 30px  =>  300/ rootValue = rem
          propList: ['*'] // 包括哪些文件  所有的文件都转化rem
        }
      }
    }

     

    改动postcss.config.js 之后需要重新启动服务才可以看到效果

    重启启动发现,rem虽然有了,但是屏幕并没有因为变化 而改变font-size

    此时我们需要第二个插件,根据当前屏幕的变化 而产生 不同的font-size


    # 修改rem基准值的js插件   需要在打包后需要使用
    $ npm i amfe-flexible -S  #因为 需要在运行时 实时改变 font-size大小 根据屏幕
    $ yarn add amfe-flexible  

     最后,入口文件main.js导入 amfe-flexible

    import 'amfe-flexible'

    注意

    • rootValue 是转换px的基准值,参考设备iPhone6,设备宽度375px。

    • flexible 在iPhone6设备设置的 html--->font-size 也为37.5px 。

    • 但是 设计稿 尺寸750px 大小,所以在设计稿量取的尺寸使用时候需要 除以2

    设计图 => 28px => 14px /37.5 = rem

     

    展开全文
  • rem适配

    千次阅读 2021-07-06 16:09:39
    rem: (root em),rem是css中的一种相对长度单位。相对于根元素(即html元素)font-size计算值的倍数,区别于em,em是相对于父标签元素 配置规则: 设计稿是1920px ,约定将屏幕分成若干份数,如80份 1. 计算出的结果最好...

    rem: (root em),rem是css中的一种相对长度单位。相对于根元素(即html元素)font-size计算值的倍数,区别于em,em是相对于父标签元素
    配置规则:

    • 设计稿是1920px ,约定将屏幕分成若干份数,如80份
      1. 计算出的结果最好不要是小数,否则会影响精度
      2. 1rem默认的px大小不要太离谱 (1rem = 1920 /80 = 24px,意味着1rem===24px)
    • 那么设备宽度与rem基准值比例为 80 。
      1. 分为多少份 每一份的宽度就是一个rem的宽度
    • 进行单位换算时可将 24px作为基准值( 基准值就是当前html字体大小 )即可
      例如
      一个div宽度为240px 那么这个div换成rem就是 240px = 240 / (1/24) == 10rem,那么这个元素在任何设备下的大小都是10rem,只是不同屏幕下代表的px值不一样
      当屏幕宽度为320时, 320 / 80 = 4 意味着1rem = 4px (10rem = 40px)

    问:当一个html页面中一个 div宽度2rem html字体大小为100px 则div实际高度是多少?
    答:html字体大小为100px,则基准值为100,即1rem === 100px 所以div宽为200px

    // 实现rem适配
    (function () {
      // rem参照根元素的字体大小
      var setFont = function () {
        var html = document.documentElement
        var width = html.clientWidth
        if (width < 1024) width = 1024
        if (width > 1920) width = 1920
        var fontSize = width / 80 + 'px'
        html.style.fontSize = fontSize
      }
      setFont()
      window.onresize = function () {
        setFont()
      }
    })()
    

    在vue脚手架中配置rem(这里借助第三方库…)

    postcss-pxtorem 可以将像素单位转换成rem单位,官网安装推荐,好像只安装postcss-pxtorem这一个就可

    npm install postcss postcss-pxtorem --save-dev
    

    amfe-flexible 可以自动给页面中的 html 标签设置字体大小,以此设置 rem 的基本值

    npm i -S amfe-flexible
    

    main.js中

    import 'amfe-flexible'
    

    postcss.config.js中

    module.exports = {
        plugins: {
          'postcss-pxtorem': {
            rootValue: 24, // 转换px的基准值。 
            propList: ['*']
          }
        }
      }
    
    展开全文
  • rem适配方案

    2022-04-11 15:56:55
    rem适配方案一 一、原理 1、让一些不能等比自适应的元素,达到当设备尺寸发生改变时等比例适配当前设备 2、使用媒体查询根据不同设备比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化...

    rem适配方案一

    一、原理

    1、让一些不能等比自适应的元素,达到当设备尺寸发生改变时等比例适配当前设备

    2、使用媒体查询根据不同设备比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也发生变化,从而达到等比例缩放的适配

    二、技术选取

    rem+媒体查询+less技术

    三、设计稿

    设计稿一般由网工提供,设计稿现在基本以750px为准,根据设计稿要求进行项目开发。

    四、元素大小取值方法

    注:拿到设计稿时,一般将屏幕宽度分15等份 比如750px 750px / 15 = 50px

    1、页面元素的rem值 = 页面元素值(px)/ (屏幕宽度 / 划分的份数)

    2、屏幕宽度 / 划分的份数 就是 html font-size 的大小

    3、或 页面元素的rem值 = 页面元素值(px)/ html font-size 字体大小

    苏宁网移动端首页(部分)

    一、设置公共common.less文件

    1、新建common.less 设置好常见的屏幕尺寸,利用媒体查询设置不同的html字体大小,因为除了首页其他页面也需要

    2、我们关心的尺寸有320px、360px、375px、384px、414px、480px、540px、720px、750px

    3、划分的份数定位15份

    4、因为pc端也可以打开苏宁移动端,所以默认html字体大小为50px,注意-这句话要写在最上面

    二、新建index.less文件

    1、将设置好的common.less文件引入到 common.less里面

    ①语法:@import “common”;

    ②@import 是导入的意思 可以把一个样式文件导入到另一个样式文件里面

    ③link 是把一个 样式文件引入到 html 页面里面

    2、将生成index.css 引入到 index.html里面

    注:如果修改了common.less文件 但是样式没有修改 可以尝试重新导入文件

    三、body样式

    1、在index.less中写入样式

    2、手动添加一个宽度 width:15rem; 750 / 50 = 15rem

    3、代码展示:

    body {
        min-width: 320px;
        // 750px / 50 = 15rem
        width: 15rem;
        margin: 0 auto;
        line-height: 1.5;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #f2f2f2;
    }

    四、头部serch-content模块

    1、外部主体部分

    需要固定定位  
    设置变量@baseFont : 50; 
    高度:height: (88rem / @baseFont);

    css:

    @baseFont : 50;
    .serch-content {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        width: 15rem;
        height: (88rem / @baseFont);
        background-color: #ffc001;
    }


    2、内部分为三个部分 classify search login
    使用flex布局 左右两个固定宽高 中间自适应

    html:

    ​
        <div class="serch-content">
            <a href="#" class="classify"></a>
            <div class="search">
                <form action="">
                    <input type="search" placeholder="厨卫保暖季 满千减百">
                </form>
            </div>
            <a href="#" class="login">登录</a>
        </div>

    css:

    .classify {
            width: (44rem / @baseFont);
            height: (70rem / @baseFont);
            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 {
                outline: none;
                height: (66rem / @baseFont);
                width: 100%;
                border-radius: (33rem / @baseFont);
                background-color: #fff2cc;
                margin-top: (12rem / @baseFont);
                border: none;
                font-size: (25rem / @baseFont);
                padding-left: (55rem / @baseFont);
                color: #757575;
            }
        }
        .login {
            width: (75rem / @baseFont);
            height: (70rem / @baseFont);
            margin: (10rem / @baseFont);
            font-size: (25rem / @baseFont);
            color: #fff;
            text-align: center;
            line-height: (70rem / @baseFont);
        }

    五、banner 部分

    盒子固定宽高 图片自适应

    html:

       <div class="banner">
            <img src="upload/banner.gif">
        </div>

    css:

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

    六、广告部分 

    分为三个部分 三张可以点击的图片

    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>

    css:

    .ad {
        display: flex;
        a {
            flex: 1;
            img {
                width: 100%;
            }
        }
    }

    七、整体效果

     rem适配方案二(flexible.js+rem)

    一、解析

    1、不需要写不同屏幕的媒体查询,因为flexible.js里面已经做了处理

    2、原理:把当前设备划分为10等份,不同设备下比例还是一致的,只需确定当前设备的html文字大小
            如:当前设计稿是750px,只需把HTML文字大小设置为75px (750px /  10)即可
            里面页面元素rem值:页面元素的px值 / 75  剩余的,让flexble.js处理

    二、flexible.js文件下载

    1、下载网址:https://github.com/amfe/lib-flexible

    2、进入网址点击code打开 并点击download下载

    3、下载完成后,将文件减压,将index.js文件引入即可使用

    苏宁网移动端首页(以一为基础进行修改)

    一、文件的引入

    1、将index.js引入到index.html中

    2、样式直接写在index.css中

    二、修改body的样式

    1、修改字体大小-因为当前页面划分成了10等份,所以字体大小为75px

    2、给页面加一个最大宽度 max-width: 750px; 因为当前参考页面为html

    三、下载cssrem插件

    1、点开vscode拓展区 输入cssrem并下载 下载完成重新加载

    2、点开设置 输入cssrem.root font-size 根据设计稿修改根字体大小
    如:750px的页面的根字体大小就是 75px
    快捷键:alt+z px与rem的转换 

    四、补充

    设计稿的最大屏幕是750px,但是我们的flexible.js是和屏幕自适应的
    所以我们需要用媒体查询设置超过750px后的页面字体大小

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

    注:因为flexible.js中有超过750px的字体大小且权重比我们输入的要高,所以我们需要提权

    展开全文
  • rem适配及原理

    2022-04-05 22:46:22
    rem适配方案
  • 移动端 REM 适配

    2022-03-07 20:55:03
    在使用 vant 完成移动端项目时, 如果需要使用 rem 单位实现适配 ( Vant 中的样式默认使用 px 单位), 推荐使用lib-flexible (设置 rem 基准值)和postcss-pxtorem (将单位转化为 rem ) 一、使用 lib-flexible动态设置...
  • 移动端rem适配

    2021-09-12 15:26:24
    一、为什么要rem适配 如果不对各种不同分辨率的设备进行适配,移动端界面样式就会乱掉。 二、rem适配方法 要借助两个工具 1.lib-flexible 2.postcss-pxtorem 三、具体操作 首先安装lib-flexible 执行 npm i amfe-...
  • rem适配
  • rem适配计算

    2022-04-07 15:37:13
    @function rem($n){ @return $n/(200)+rem; } 新建common.scss文件 html{ font-size:calc(100vw/1.875) } 这个表达式的理解: 100vw是设备视口的总宽度,18.75是计算1rem=400px,即750px/400px=1.875 实际...
  • vue使用rem适配

    2022-06-07 19:43:11
    近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配,然后想到用rem来实现适配问题 1.首先安装一个px转rem的插件 2.新建一个rem.js文件 3.在main.js中引入rem.js文件 修改.postcssrc.js 文件 ...
  • Vant rem适配

    2021-12-31 10:54:55
    vue中使用vant的rem适配 如果需要使用 rem 单位进行适配,推荐使用以下两个工具: postcss-pxtorem是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位 lib-flexible用于设置 rem 基准值 首先需要安装,安装命令...
  • 一.rem基础 rem单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小 不同的是rem的基准是相对于html元素的文字大小 比如根元素(html)设置flont-size=12px;非根元素设置width:2rem,则换成px...
  • 移动端的适配 rem 适配
  • rem适配布局有两种方案,一种是rem + 媒体查询 + Less技术,一种是使用 flexible.js。
  • CSSrem适配

    2022-06-24 11:44:05
    CSS rem rotate
  • 移动端rem适配原理

    2022-03-31 12:58:50
    计算原理 比例=设计稿/100 相当于设计稿 分成100分 ...那么3.75化作rem, 3.75rem=375px的设计稿 设备尺寸 设计稿尺寸 比例 公式 n=根字体大小 320 375 100 320/375=n/100 85px 375 375 100 375/375=n/100 100px 414
  • rem适配布局极为详细,含苏宁案例代码
  • rem适配原理

    千次阅读 2021-01-14 21:42:48
    rem适配原理 rem是指相对于根元素的字体大小的单位 em是指相对于父元素的字体大小的单位 rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位,也就是我们 前端常说的适配单位rem。因为...
  • H5页面rem适配

    2022-04-13 15:53:13
    <script> !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&...x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,994
精华内容 7,597
关键字:

rem适配