精华内容
下载资源
问答
  • rem屏幕适配
    千次阅读
    2022-01-18 09:29:20

     目前我们做的这个PC端后管项目需要做适配,如果没有做适配的话,在缩放的时候会出现布局错位的问题,解决方法如下:

     <script type="text/javascript">

        $(window).resize(function() // 绑定到窗口的这个事件中

        {

            var whdef = 100 / 1080 // 表示1920的设计图,使用100PX的默认值

            var wH = window.innerHeight // 当前窗口的高度

            var wW = window.innerWidth // 当前窗口的宽度

            var rem = wH * whdef // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-   SIZE值

            $('html').css('font-size', rem + 'px')

        })

        $(window).ready(function() {

            var whdef = 100 / 1080 // 表示1920的设计图,使用100PX的默认值

            var wH = window.innerHeight // 当前窗口的高度

            var wW = window.innerWidth // 当前窗口的宽度

            var rem = wH * whdef // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-    SIZE值

            $('html').css('font-size', rem + 'px')

        })

      </script>

    提示:

    1、我们项目使用的是vue,直接在public 文件夹下的index.html中放入这段代码,值得注意的是我们上面代码使用的是jquer语法,你要根据自己需求来定。 

    2、如果你使用的是vscode 可以安装css-rem插件 当你输入px的时候,它会自动变换成rem,但是需要手动设置1rem对应多少px,这个配置网上有很多,自己可以去查询。

    更多相关内容
  • 文章目录rem屏幕适配简单屏幕适配方案原理代码实现页面效果缺点1像素边框问题通用屏幕适配方案原理代码实现优化 rem屏幕适配 通过使用rem单位使网页,在不同屏幕尺寸下正常显示的一种移动端开发方案。 简单屏幕适配...

    rem屏幕适配

    通过使用rem单位使网页,在不同屏幕尺寸下正常显示的一种移动端开发方案;

    rem是CSS3新增的一个相对长度单位,相对于根元素(html)的font-size进行计算;

    简单屏幕适配方案

    原理

    设置<meta>标签、获取视口宽度,动态设置根元素(HTML)的fontsize。

    代码实现

    <!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-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>Document</title>
    	<style>
            html{
                font-size: 100px;
            }
            body{
                margin: 0;
                padding: 0;
            }
            div{
                height: 1rem;
                background-color: red;
                border-bottom: 1px solid #000;
            }
        </style>
        <script>
            setRemUnit();
            addEventListener('resize', setRemUnit);
            function setRemUnit(){
                // 获取视口宽度
                let viewWidth = document.documentElement.getBoundingClientRect().width
                || window.innerWidth;
                // 基于设计稿 375 宽进行设置,可根据自己需要修改
                let rabtio = viewWidth / 375;
                // 设置fontSize,html的fontsize为100; 1rem = 100px
                let fontSize = rabtio * 100;
                // 修改HTML的fontsize
                document.documentElement.style.fontSize = fontSize + 'px';
            }
        </script>
    </head>
    <body>
        <div></div>
    </body>
    </html>
    

    resize 事件是在浏览器窗口被重置时触发的,如当用户调整窗口大小,或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。

    Document.documentElement 是一个会返回文档对象(document)的根元素的只读属性(如HTML文档的 <html> 元素)。

    页面效果

    在这里插入图片描述

    缺点

    简单屏幕适配方案的1像素边框问题;

    1像素边框问题

    同样是1像素的边框,在不同清晰度的屏幕下、不同DPR下、相同的CSS像素渲染出的物理像素去却相同。

    DPR为1时,1px渲染出1物理像素;
    在这里插入图片描述
    DPR为2时,1px渲染出2物理像素;
    在这里插入图片描述
    DPR为3时,1px渲染出3物理像素;
    在这里插入图片描述

    通用屏幕适配方案

    通用屏幕适配方案解决了简单屏幕适配方案的1像素边框问题。

    原理

    在不同dpr(设备像素比)下,动态设置<meta>标签的scale(页面缩放),解决了1像素边框问题。

    代码实现

    <!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-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>Document</title>
        <style>
            html{
                font-size: 100px;
            }
            body{
                margin: 0;
                padding: 0;
            }
            div{
                height: 1rem;
                background-color: red;
                border-bottom: 1px solid #000;
            }
        </style>
        <script>
            // dpr => scale = 1/dpr
            let viewportEl = document.querySelector('meta[name = viewport]');
            let dpr = window.devicePixelRatio || 1;
    
            dpr = dpr >= 3 ? 3: (dpr >= 2 ? 2: 1);
            document.documentElement.setAttribute('data-dpr', dpr);
    
            let scale = 1 / dpr;
            let content = 'width=device-width, initial-scale=' + scale + 'px';
    
            if(viewportEl){
                viewportEl.setAttribute('content', content);
            }else{
                viewportEl = document.createElement('meta');
                viewportEl.setAttribute('name', 'viewport');
                viewportEl.setAttribute('content', content);
                document.head.appendChild(viewportEl);
            }
            
            setRemUnit();
            window.addEventListener('resize', setRemUnit);
            function setRemUnit(){
                // 获取视口宽度
                let viewWidth = document.documentElement.getBoundingClientRect().width
                || window.innerWidth;
                // 基于设计稿 375 宽进行设置,可根据自己需要修改
                let rabtio = viewWidth / 375;
                // 设置fontSize,html的fontsize为100; 1rem = 100px
                let fontSize = rabtio * 100;
                // 修改HTML的fontsize
                document.documentElement.style.fontSize = fontSize + 'px';
            }
        </script>
    </head>
    <body>
        <div></div>
    </body>
    </html>
    

    HTML DOM setAttribute() 方法
    例:element.setAttribute(attributename,attributevalue);
    setAttribute() 方法添加指定的属性,并为其赋指定的值。
    如果这个指定的属性已存在,则仅进行修改。

    优化

    在原有功能的基础上加了minwidth、maxwidth视口限制;

    当视口大于maxwidth(小于minwidth)时,页面将按maxwidth(minwidth)时渲染;

    <!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-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>Document</title>
        <style>
            html{
                font-size: 100px;
            }
            body{
                margin: 0;
                padding: 0;
            }
            div{
                height: 1rem;
                background-color: red;
                border-bottom: 1px solid #000;
            }
        </style>
        <script>
            // dpr => scale = 1/dpr
            let viewportEl = document.querySelector('meta[name = viewport]');
            let dpr = window.devicePixelRatio || 1;
    
            let minwidth =320;
            let maxwidth =540;
    
            dpr = dpr >= 3 ? 3: (dpr >= 2 ? 2: 1);
            document.documentElement.setAttribute('data-dpr', dpr);
            document.documentElement.setAttribute('minwidth', minwidth);
            document.documentElement.setAttribute('maxwidth', maxwidth);
            
    
    
            let scale = 1 / dpr;
            let content = 'width=device-width, initial-scale=' + scale + 'px';
    
            if(viewportEl){
                viewportEl.setAttribute('content', content);
            }else{
                viewportEl = document.createElement('meta');
                viewportEl.setAttribute('name', 'viewport');
                viewportEl.setAttribute('content', content);
                document.head.appendChild(viewportEl);
            }
            setRemUnit();
            window.addEventListener('resize', setRemUnit);
            function setRemUnit(){
                // 获取视口宽度
                let viewWidth = document.documentElement.getBoundingClientRect().width
                || window.innerWidth;
    
                 // minwidth、maxwidth优化
                 if(maxwidth && (viewWidth / dpr > maxwidth)){
                     viewWidth = maxwidth * dpr;
                 }else if(minwidth && (viewWidth / dpr < minwidth)){
                     viewWidth = minwidth * dpr;
                 }
    
                // 基于设计稿 375 宽进行设置,可根据自己需要修改
                let rabtio = viewWidth / 375;
                // 设置fontSize,html的fontsize为100; 1rem = 100px
                let fontSize = rabtio * 100;
                // 修改HTML的fontsize
                document.documentElement.style.fontSize = fontSize + 'px';
            }
        </script>
    </head>
    <body>
        <div></div>
    </body>
    </html>
    
    展开全文
  • 主要介绍了vue使用rem实现 移动端屏幕适配的相关知识,通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下
  • rem屏幕适配及px转rem

    2020-07-15 20:26:05
    rem屏幕适配及px转rem屏幕适配px转rem 屏幕适配 在vue项目中的index.html页面head标签内插入这段代码: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? '...

    rem屏幕适配及px转rem

    屏幕适配

    在vue项目中的index.html页面head标签内插入这段代码:

    (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
      		//动态改变body宽度以自适应浏览器可见区域的变化
    		document.getElementById("html").style.width = (clientWidth) + "px";
    		document.getElementById("body").style.width = (clientWidth) + "px";
    		//document.getElementById("app").style.width = (clientWidth) + "px";
              if (!clientWidth) return;
      		//设计图宽度为1920px,这里1rem即为16px
            docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
            };
    
          	if (!doc.addEventListener) return;
    		//监听屏幕的改变
          	win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    

    测试:
    在vue项目中安装css与less(这里可选安装,与屏幕适配关系不大,主要用来测试适配
    npm install --save-dev less less-loader
    npm install --save-dev style-loader css-loader

    build/webpack.base.conf.js 里面的module.exports 里的 module 里添加下面这段配置:

    {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
    }
    

    新建模块 headers:

    <template>
        <div class="box"> <p>header</p> </div>
    </template>
    
    <script>
    export default {
      name: "headers",
      data() {
        return {};
      }
    };
    </script>
    
    <style scoped lang="less">
    .box {
      height: 6rem;
      width: 4rem;
      background-color: red;
      font-size: 0.5 rem;
    }
    </style>
    

    px转rem

    1)安装px2rem插件
    npm install px2rem-loader
    2)配置
    webpack.base.conf.js > 在module> rules 下添加:

    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
    }
    

    2)找到utils.js这个文件 在cssloader 后面加入

    var px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 16 // 16px = 1rem
          remPrecision: 8 // rem的小数点后位数
        }
      }
    

    再然后把这行:

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    

    替换成这个:

    const loaders = [cssLoader , px2remLoader];
    

    注意:这里16px = 1rem 最好与前面index.html中的对应。

    展开全文
  • 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

     

    展开全文
  • 375px宽度设计稿对应22px=1rem 设置蓝湖的自定义css rem 点击确定就可以直接看到计算好的rem值。非常方便 效果: @media only screen and (min-width: 320px) { html { font-size: 18.773px !important }...
  • 再加上rem布局的字体适应,可以完美解决各种屏幕适配问题!单位可参考 : 你不知道的css单位该布局兼容性如下:iefirefoxchromesafarioperaios safariandroid browserandroid chrome9.0+2.0+4.0+3.1+3.5+3.2...
  • 完美的响应式布局vw+vh+rem屏幕适配方案!

    万次阅读 多人点赞 2018-08-07 13:26:26
    再加上rem布局的字体适应,可以完美解决各种屏幕适配问题! 单位可参考 : 你不知道的CSS单位 该布局兼容性如下: IE Firefox Chrome Safari Opera iOS Safari Android Browse...
  • step1. 安装 lib-flexible 插件 ... npm install postcss-pxtorem --save step3. 引入 lib-flexible 在 main.js 文件中引入 lib-flexible: import 'lib-flexible/flexible' step4. 编辑 postcss.config.js 文
  • rem适配详细教程

    千次阅读 2021-05-13 12:48:19
    一.rem是什么? rem是指相对于根元素的字体大小的单位。可以简单地理解为一个相对大小的单位。 二.简单区分px,em,rem px:html中css的一个绝对单位; em:相对于父元素的字体大小的单位; rem:相对于...
  • rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果。
  • rem适配原理

    千次阅读 2021-01-14 09:12:03
    rem适配原理 rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位,也就是我们 前端常说的适配单位rem。因为rem的特性相对长度单位,常被用来做移动适配,pc端页面不推荐使用remrem...
  • REM解决多屏适配

    2021-06-04 18:16:07
    vant插件中的默认样式都是使用px作为单位,所有移动端的项目就需要来用rem进行适配,方便各种屏幕大小的设备都可以正常的浏览 3. 解决 两个工具包 : posstcss-pxtorem : 可以把项目中的 px 全部转换为 rem lib-...
  • rem移动端屏幕适配

    2020-01-06 10:45:45
    用js设置根节点字体大小 <script> let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; let htmlDom = document.getElementsByTagName('html')... htmlWidth > 750 ...
  • css3语法: (750px设计图的1rem = 100px) @media only screen and (min-width: 320px) and (max-width: 479px){ html { font-size: 42.67px !important; } } @media only screen and (min-width: 480px) and ...
  • rem和media适配

    2021-06-28 10:22:39
    1.media scss rem自适应适配: 1.1:定义:根据不同屏幕尺寸动态改变页面样式;rem实质上是一个相对单位,我们做的时候只需根据设计稿做媒体查询,规定不同屏幕范围html字体大小,在实际元素尺寸上用实际尺寸/设计稿...
  • rem解决多屏适配方案

    2021-06-19 20:13:50
    rem解决多屏适配方案 项目是移动端,所以,它需要去适配不同的手机屏幕。我们希望实现适配的效果是:与屏幕大小相关。以按钮为例:在大屏手机,按钮的宽高都大些,在小屏手机上尺寸小些。 三方模块: 把所有px单位...
  • vue和react分别使用rem适配方法3.1

    千次阅读 2022-03-01 18:20:51
    1.rem适配文件,在untils文件夹下新建rem.js,复制粘贴以下代码 2.index.js文件内引入import "./utils/rem.js"; 3.vscode下个插件(px To rem)用于px转rem,快捷键是alt+z;我的设计图是1920,如果你不一样,可以...
  • rem适配布局极为详细,含苏宁案例代码
  • 移动端微信、QQ浏览器 web 用 rem 单位适配不生效问题
  • 主要介绍了移动 web 端屏幕适配(rem)。详细的介绍了移动 web 端屏幕适配rem),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 移动端屏幕适配(rem+js)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,208
精华内容 4,083
关键字:

rem屏幕适配