精华内容
下载资源
问答
  • rem适配方案
    2021-12-22 15:46:42

    背景:移动端适配方案有很多,rem方案使用了很久了,一直没有记录,今天记录一下。 

    原理:

    通过根据屏幕尺寸,成比例改变html的font-size实现适配。

    优化:

    1.大家好多使用媒体查询改变html的font-size比较死板,遇到一些屏幕不能完美的适配有一点偏差,通过获取设备屏幕尺寸,精准计算,精准适配。

    2.平时UI以iphone6为尺寸出设计稿,通过下边方案,1rem即代表设计稿的10px,便于计算编写页面。 

    代码:

    //动态为根元素设置字体大小
    function init () {
        // 获取屏幕宽度
        var width = document.documentElement.clientWidth
        // 设置根元素字体大小。设计稿为iphone6尺寸,1rem为10px,便于计算
        document.documentElement.style.fontSize = width * 10 / 375 + 'px'
    }
    
    //首次加载应用,设置一次
    init()
    // 监听手机旋转的事件的时机,重新设置
    window.addEventListener('orientationchange', init)
    // 监听手机窗口变化,重新设置
    window.addEventListener('resize', init)

    更多相关内容
  • rem适配方案

    2022-04-08 17:50:17
    1. 让一些不能等比自适应的元素,达到当...rem实际开发适配方案1 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份) ③每一份作为html字体大小,这里就是50px ④那么在

    1. 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。
    2. 技术方案:
    ①less+rem+媒体查询
    ②flexible.js+rem
    rem实际开发适配方案1
    ①假设设计稿是750px
    ②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
    ③每一份作为html字体大小,这里就是50px
    ④那么在320px设备的时候,字体大小为320/15就是 21.33px
    ⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
    ⑥比如我们以750为标准设计稿
    ⑦一个100 * 100像素的页面元素在 750屏幕下, 就是 100/ 50 转换为rem 是 2rem*2rem 比例是1比1
    ⑧320屏幕下,html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
    ⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
    总结:
    ①最后的公式:页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
    ②屏幕宽度/划分的份数就是 htmlfont-size 的大小
    ③或者:页面元素的rem值 = 页面元素值(px) / html中 font-size 字体大小
    设计图采用 750px 设计尺寸,引入初始化样式

    <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">
    

    设置公共common.less文件

    • 新建common.less 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小,因为除了首页其他页面也需要
    • 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
    • 划分的份数我们定为 15等份
    • 因为我们pc端也可以打开我们移动端首页,我们默认html字体大小为 50px

    rem 适配方案2
    手机淘宝团队出的简洁高效移动端适配库,我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理,它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。我们要做的,就是确定好我们当前设备的html 文字大小就可以了,比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以,里面页面元素rem值: 页面元素的px 值 / 75 ,剩余的让flexible.js来去算:github地址:https://github.com/amfe/lib-flexible
    总结:
    因为flexible是默认将屏幕分为10等份,但是当屏幕大于750的时候希望不要再去重置html字体了,所以要自己通过媒体查询设置一下,并且要把权重提到最高(VSCode px 转换rem 插件 cssrem) ,因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置
    在这里插入图片描述在这里插入图片描述

    展开全文
  • flexible.js实现移动端实现移动端rem适配方案适配方案需要了解的基础知识:需要了解的基础知识:物理像素:物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色...
  • PC端网站 rem适配方案

    2021-11-24 16:07:01
    1、使用sass语法 转换px rem , vscode编辑器安装插件easy-scss 安装之后打开插件setting.json, 在setting.json里配置转换后css的路径 “easysass.targetDir”: “./css” 创建css文件、scss文件: 项目中如何...

    以1920设计稿为准
    1、使用sass语法 转换px rem , vscode编辑器安装插件easy-scss
    安装之后打开插件setting.json, 在setting.json里配置转换后css的路径 “easysass.targetDir”: “./css”
    在这里插入图片描述
    创建css文件、scss文件:
    在这里插入图片描述
    项目中如何使用index.scss文件:
    $yellow: yellow;
    $theme: blue;
    $orange: orange;
    $red: red;

    // PX 转 rem
    @function px2Rem($px, KaTeX parse error: Expected '}', got 'EOF' at end of input: … @if (unitless(px)) {
    //有无单位
    @return (KaTeX parse error: Expected 'EOF', got '}' at position 24: …2) * 1rem; }̲ @else if (unit…px) == em) {
    @return KaTeX parse error: Expected 'EOF', got '}' at position 9: px; }̲ @return (px / $base-font-size) * 1rem;
    }

    .nav p{
    font-size: px2Rem(12px);
    color: $red;
    }

    easy-scss 自动编译后的index.css:
    .nav p {
    font-size: 0.66667rem;
    color: red;
    }

    2、设置媒体查询
    @media screen and (max-width: 1920px) {
    html {
    font-size: 19.2px;
    }
    }
    @media screen and (max-width: 1680px) {
    html {
    font-size: 16.8px;
    }
    }
    @media screen and (max-width: 1380px) {
    html {
    font-size: 14.4px;
    }
    }
    @media screen and (max-width: 1300px) {
    html {
    font-size: 12.8px;
    }
    }

    3、代码热更新插件:Liver Serve (写完后页面会自动更新,不用再刷新了)
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 设计稿常见尺寸宽度:一般情况下,我们以一套或者两套适应大部分的屏幕,放弃极端...动态设置html标签font-size大小(如果不明白为什么要动态设置html的大小,请查看rem跟em的区别这篇文章) 元素大小取值方法:......

    1.rem+媒体查询+less技术

    设计稿常见尺寸宽度:一般情况下,我们以一套或者两套适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果,现在基本以750为准。

    动态设置html标签font-size大小(如果不明白为什么要动态设置html的大小,请查看rem跟em的区别这篇文章)

    1. 假如设计稿是750px
    2. 假设我们把整个屏幕划分为15等份(划分标准也可以是10等份或者20等份)
    3. 每一份html的字体大小就是50px(750/15= 50)
    4. 那么在320px的设备的时候,html的字体大小为320/15 = 21.33px
    5. 比如我们以750px标准设计稿
    6. 一个100*100像素的图片在750屏幕下,就是100/50转换成2rem,那么就是2rem*2rem比例是1:1
    7. 320屏幕下,html的文字大小是21.33px,则2rem= 42.66px此时宽跟高都是42.66px,但是宽高比是1:1
    8. 但是已经能实现不同屏幕下,页面元素盒子等比例缩放的效果。

     

    元素大小取值方法:

    • 最后的公式:页面元素的rem值= 页面元素值(px)/(屏幕宽度/划分的份数),例如:div设置的2rem的宽度跟高度= 750px设计稿上面的100px的元素大小/屏幕划分成15等分以后,每一份的大小为50px 

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

    • 或者:页面元素的rem值= 页面元素值(px)/html中的font-size的大小

    2.rem+flexible.js

    • 手机淘宝团队出的简洁高效移动端适配库
    • 我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理
    • 它的原理是把当前屏幕划分为10等份,但是不同设备下,比列还是一致的。
    • 我们要做的就确定好我们当前设备的html文字大小就可以了
    • 比如我们当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/10)就可以
    • 里面页面元素rem值:页面元素的px值/75
    • 剩余的,让flexible.js来去算。

    展开全文
  • rem 适配方案

    2020-11-15 12:58:20
    原因是如果我们用px作为长度大小单位的话,就无法根据屏幕大小变化实时改变页面元素的大小,反之,rem就可以做到实时适配。 其次,我们也要清楚以rem为单位的元素大小是根据css html根标签下的文字大小(fontsize)来...
  • vue3引入vant组件库并进行rem适配方案
  • 每次做移动端的时候适配是最讨厌的问题,使用普通rem的时候会出现某些设备换算不清。导致页面结构出现偏差,所以我推荐使用淘宝的flexible解决方案。 在做移动端的时候将以下代码保存到一个公共的js,每次使用的时候...
  • 一、利用lib-flexible、postcss-plugin-px2rem插件 进行移动端rem适配。1、第一引入lib-flexible .安装lib-flexible: npm i lib-flexible --save-dev在项目的入口main.js文件中引入lib-flexible:import 'lib-...
  • 移动端rem适配方案(flexible.js)
  • 十、rem适配方案

    2022-09-05 14:52:34
    flexible.js 只要屏幕宽度有一点变化,那么就会更改html的font-size的值,变化比较柔和,自己写的媒体查询没有这么柔和只有达到...2、css中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值。
  • 数据大屏rem适配方案

    2022-03-05 11:37:27
    一般来说,做PC端的页面并不像移动端那样对分辨率及屏幕大小有的特别强的要求,但是针对数据大屏这种展示型的页面来说,就需要考虑适配方案了,毕竟要尽可能的保证大部分的主流显示器都能正常展示。 市面上大部分...
  • 手淘rem适配方案

    2018-05-31 06:25:47
    前置知识:什么是rem CSS3新增的一个相对单位rem(root em,根em).rem是相对于根节点(或者是html节点).如果根节点设置了font-size:10px;那么font-size:1.2rem;字体大小等于12px。 前置知识:什么是dpr 在浏览器...
  • rem适配布局有两种方案,一种是rem + 媒体查询 + Less技术,一种是使用 flexible.js。
  • vue中使用rem适配方案

    千次阅读 2021-08-03 09:05:18
    一、移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex ...二、vue中使用rem适配方案 1、安装插件 (这里我使用的是cnpm比较下载安装快速) cnpm i lib-flexi...
  • Vue rem 适配方案

    2021-07-31 11:43:47
    1.此针对web端的适配 1.下载lib-flexible npm i lib-flexible --save 2.在main.js中引入lib-flexible import 'lib-flexible/flexible' 3. 安装px2rem-loader (自动换算rem) npm install px2rem-loader 4....
  • Vant的Rem适配方案

    2021-08-03 15:42:25
    Rem适配 Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem lib-flexible 用于设置 rem 基准值. PostCSS 配置 1.在根...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,901
精华内容 3,560
关键字:

rem适配方案

友情链接: lingjiejuzheng.zip