移动端rem适配方案（解决1px 兼容问题）

最新推荐文章于 2024-04-29 11:17:53 发布
最新推荐文章于 2024-04-29 11:17:53 发布
阅读量2.9k 收藏 1
点赞数
文章标签： css rem

<!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-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body style="box-sizing: border-box;margin:0;padding:0">
  <div style="width:7.5rem;height:2rem;background:red"></div>
  <script>
    (function() {//解决不同手机dpr不一致的适配问题(解决了1px的问题)
          var scale = 1.0;
          if (window.devicePixelRatio === 2) {
              scale *= 0.5;
          }
          if (window.devicePixelRatio === 3) {
              scale *= 0.333333;
          }
          var meta = document.createElement('meta');
          meta.setAttribute('name', 'viewport');
          meta.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
          document.head.appendChild(meta);       
    })();
    (function (doc, win) {//解决不同手机分辨率不一致的适配问题
        var docEl = "";
        docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) {
                return
            } else {
                if (clientWidth > 1280) {
                    docEl.style.fontSize = 170.66+ "px"
                } else {
                    if (clientWidth < 640) {
                        docEl.style.fontSize = 85.33 + "px"
                    } else {
                        if (clientWidth <= 1280 || clientWidth >= 640) {
                            docEl.style.fontSize = (clientWidth / 750) * 100 + "px"
                        }
                    }
                }
            }
        };
        if (!doc.addEventListener) {
            return
        }
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false)
    })(document, window);
  </script>
</body>
</html>

sj1527382290
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
em rem解析 rem适配 及1px适配
六鼎
08-05 485
显示器像素 1.物理像素（设备像素）–显示器上最小的物理单元，由主机控制，显示不同的色值和亮度。 2.设备独立像素（css像素）–每个css像素属于虚拟像素，由系统转换控制不定数量的物理像素响应。 3.设备像素比（dpr）–物理像素 / 设备独立像素 像素关系 Iphone6为例： 图中所示，css的2px，在普通屏幕中占据4个格子，在高清屏幕中占据16个格子，总面积相等，所以高清屏幕中显示的更加清楚。 em em是css2时推出的相对单位，相对于父级元素的字体大小比值，浏览器默认font-size:
[转载]兼容性--rem兼容适配解决方案
Datura_Elena的博客
10-29 2058
转载于https://www.w3cschool.cn/weflow/weflow-rem.html REM 兼容适配解决方案 什么是 REM REM（Font size of the root element）是指相对于根元素的字体大小的单位。 范例： 若根节点font-size设置为 10px，则使用 3rem 时，计算后得 3*10 = 30px如果根节点设置为 20px，侧计
移动端1px像素边框
wangdan_2013的博客
10-18 507
造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。 解决边框变粗
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
最新发布
weixin_67244432的博客
04-29 1964
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
移动适配rem
qq_40832034的博客
06-11 1779
一、移动适配 背景：因为移动端不同设备宽高不同，需要一种方法使得对所有宽高布局一致。 方法： rem： 目前多数企业在用的解决方案 vw / vh：未来的解决方案 用像素做单位没有办法实现等比例放大缩小，用百分比做单位也不能完全解决。 对于宽度来说，其父级元素无须确定宽度就能设置百分比 若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式 1、rem单位 相对单位 rem单位是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 <style> h
viewport + rem 解决移动端1px问题
欢迎欢迎
03-08 488
解决方案 同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。 在devicePixelRatio=2 时，设置meta： <meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 在devicePixelRatio=3 时，设置meta： <meta
关于vue利用postcss-pxtorem进行移动端适配的问题
01-19
1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。 2.cnpm install postcss-...
lib-flexible 移动端适配解决方案
12-20
在移动端开发中，适配不同尺寸的屏幕是一个重要的任务，lib-flexible 是一个常见的解决方案，主要解决了移动设备上的页面布局和元素尺寸的问题。这个库基于 Flexible Box Layout（Flexbox）模型，结合了“viewport ...
移动web开发，rem适配方案
10-31
本文将深入探讨移动Web开发中的rem适配方案，包括flexible.js+rem和less+rem+媒体查询两种常见策略。 首先，我们要了解移动端的基础知识。当前，大部分中国市场的手机浏览器内核基于Webkit，如UC、QQ和百度浏览器。...
移动端rem开发自适应js写法
08-10
除了`flexible.js`，还有其他流行的适配方案，如`lib-flexible`、`px2rem-loader`（用于Webpack）和`postcss-px2rem`（用于PostCSS）。这些工具和库提供了更自动化的方式来处理REM转换，简化了开发流程。 总的来说...
移动端适配rem文件js代码.zip
01-17
"移动端适配rem文件js代码.zip"这个压缩包就是针对这一需求提供的一种解决方案，它包含了一个名为“rem.js”的JavaScript文件，用于动态调整页面元素的大小，以适应不同分辨率和屏幕尺寸的手机或平板电脑。...
移动端rem适配解决方案（完美版）
03-11
引用简单，布局简便 根据设备屏幕的DPR,自动设置最合适的高清缩放。 保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多） 有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）
rem优缺点
青山不改，绿水长流。
09-24 970
（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。))表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。（4）rem在处理小数的时候会有误差，而且对小屏幕不友好。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。（2）使用iframe引用也会出现问题。（1）在奇葩的dpr设备上(
移动端 REM 适配
m0_65812066的博客
01-05 778
是一款 postcss 插件，用于将单位转化为 rem用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。
移动端的rem适配
hjdjhh的博客
12-16 2403
vue中使用vant的rem适配 如果需要使用rem单位进行适配，推荐使用以下两个工具： postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible用于设置 rem 基准值 安装命令 npm install postcss-pxtorem --save-dev npm i -S amfe-flexible 新建一个postcss.config.js文件配置设计稿 module.exports = { ...
移动端REM适配的几种方法
weixin_43802583的博客
11-30 843
移动端REM适配的几种方法 一、网易采用的方式 步骤： 根据设计稿尺寸完成页面； 设置meta，控制视口宽度，让页面以1:1比例渲染页面 动态设置html的font-size； 把各元素的px值除以100转换为rem（字体除外） 关键代码 设置视口： 给meta设置这些属性：name=&amp;amp;quot;viewport&amp;amp;quot; content=&amp;amp;quot;initial-scale=1,maximum-scale=1,mi...
在安卓手机中rem单位border-radius:50%画圆变形的解决方案
細水、長流√的专栏
04-22 2219
罪魁祸首 i{ display inline-block width .08rem height .08rem background-color #D0021B border-radius 50% } 画了个圆，在ios中效果很理想。但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过ios（毕竟安卓版...
Rem与Px的转换
热门推荐
huang100qi的专栏
06-10 4万+
rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。 Rem的使用 前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的
移动端REM适配 postcss-pxtorem怎么配置
08-25
在移动端进行REM适配可以使用PostCSS插件postcss-pxtorem来自动转换像素单位为REM单位。面是配置postcss-pxtorem的骤： 1. 首先，确保你已在项目中安装了postcss和postcsspxtorem插件。 2. 在项目根目录下创建一个postcss.config.js文件，并在该文件中进行配置。 ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 根据设计稿的实际尺寸设置 unitPrecision: 5, // 转换后的REM值保留的小数位数 propList: ['*'], // 需要转换的CSS属性，默认为全部 selectorBlackList: [], // 需要忽略的CSS选择器，例如['.ignore']，可以使用正则表达式 replace: true, // 是否替换原有的CSS规则 mediaQuery: false, // 是否将媒体查询中的像素单位也转换为REM单位 minPixelValue: 0 // 小于该数值的像素单位不转换 } } } ``` 上述配置中，rootValue代表根元素（html）的字体大小，一般与设计稿的实际尺寸对应。unitPrecision用于设置转换后的REM值保留的小数位数。propList是一个数组，用于指定需要转换的CSS属性，默认为全部。selectorBlackList用于指定需要忽略的CSS选择器，可以使用正则表达式。replace用于设置是否替换原有的CSS规则。mediaQuery用于指定是否将媒体查询中的像素单位也转换为REM单位。minPixelValue用于设置小于该数值的像素单位不转换。 3. 在项目的postcss.config.js文件中添加配置后，你可以在构建工具（例如Webpack）的配置文件中使用postcss-loader加载并应用PostCSS插件。 ```javascript module.exports = { // ... module: { rules: [ // ... { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, // ... ] } // ... } ``` 以上配置中，使用了style-loader、css-loader和postcss-loader来处理CSS文件。具体的配置方式可能会因你所使用的构建工具而有所不同，请根据实际情况进行相应的调整。 总之，通过配置postcss-pxtorem插件，你可以实现移动端REM适配，使得页面在不同设备上展示更加统一和适配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值