正式使用rem

最新推荐文章于 2022-02-22 17:11:07 发布
最新推荐文章于 2022-02-22 17:11:07 发布
阅读量218 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39241421/article/details/99431254
版权

需求：移动端推广页面，需要嵌入到微信公众号

现况：之前全部都用绝对单位，没有认真使用过相对单位rem,看了一些购物网站都在用rem,于是这次完全使用了rem写页面

目的：实际检测rem布局效果。安卓和ios分辨率不一样，导致字体大小也不一样

测试一：字体大小 改成 px；

图片的大小设计图是按照宽为750px，所有到前端都需要除二。

问题二：安卓系统背景色默认为灰色，ios默认为白色。pc浏览器默认背景色也是白色。

解决方案：body设置默认背景

 

MoonMoonLee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信内置浏览器及华为小米QQ浏览器关于使用rem的兼容性问题解决
JCat的博客
12-11 2555
一、问题描述 在做移动端h5页面开发的时候，rem的使用简直是屏幕适配的利器，但是，它在也存在兼容性问题： 在微信内置浏览器及华为小米内置及QQ浏览器访问rem做的h5的时候，由于设置部分字体过小，以上浏览器为了满足浏览需要，强制限制了html最小字体，虽然我们代码设置了html,body的字号，但并未生效，从而影响了页面布局！ 二、rem的使用 之前我已经整理过了如何使用rem的方法，这里只是为了解决bug，就不展开说明了：附：如何使用rem适配移动端及移动端适配的其他方法汇总 三、解决方法 此版本
rem详细使用案例
10-23
这是一个前端开发项目的移动案例，一看就懂，最基本的
vue中使用rem布局代码详解
12-13
1、npm i amfe-flexible 2、import ‘amfe-flexible‘ 然后再，安装postcss-px2rem插件 npm i postcss-px2rem 在package.json中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 26.7 } } } 在vue项目中使用rem布局简易教程 rem布局由于其根据屏幕宽度的改变修改相应的rem与px的转换比例，这样非常适合移动端的项目。 在不同的分辨率下，都会有较好的显示
移动端使用rem同时适应安卓ios手机原理解析，移动端响应式开发
weixin_34315485的博客
05-30 205
rem单位大家可能已经很熟悉，rem是随着html的字体大小来显示代表宽度的方法，我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 12px 只需设置html的字体大小为12/16 及html的字体大小为font-size:75% html {font-size:75%; <!-- 12/16 --&...
px，em和rem，移动端移动端适配
qq_2549265061的博客
07-30 1046
px，em和rem px是固定的长度单位。em是父元素的font-size（字体大小）的值，常用来设置首行缩进2em（2字符）。rem是根节点（html）的font-size（字体大小）的值，可以用来做移动端的自适应。 rem做移动端适配 一份长度最好是除得尽的数值如40,50。 <!doctype html> <html lang="en"> <head> ...
【rem】【样式出错】css使用rem 在部分移动设备中样式出错的解决方法
bo1839的博客
04-03 860
实测部分机型*中，emoji表情包有部分不展示了，如图 调试过程(解决方案在最下面,此处可以略过)： 苹果和部分安卓都显示正常，在微信开发工具中调试，发现使用的单位是rem，emoji的表情实际上是一张emoji集合图，通过css定位实现的展示，以下贴上主要实现css <style> .emoji .item:nth-child(1) { background-pos...
场景化分析rem布局原理
花森酱JioJio
10-03 5385
vue项目适配rem布局 rem的原理将物理像素px分为一百份，每一份就是1rem，例如当你的手机是苹果6s，物理像素是375px，那么转化成rem就是37.5px。插件设置html根标签的字体属性font-size变为1rem，通过转换将css中的px转换成对应的rem。当屏幕发生大小缩放的时候，更改html下的font-size的大小，就能实现了其他标签的大小距离也随比例缩放，达到rem自适应布局。 1）安装依赖 npm i lib-flexible postcss-px2rem --save 2）删
iOS和安卓下相同font-size显示字体大小不一致的解决办法
henryzyk的博客
02-22 3040
iOS和安卓下相同font-size显示字体大小不一致的解决办法 原因：因为webkit内核的浏览器会根据容器的宽来做“适应”的字体大小的计算。 移动端我们建议使用自适应rem字体单位。 使用全局css样式禁用Webkit内核浏览器的文字大小调整功能，以实际大小显示。 -webkit-text-size-adjust: none; ...
关于rem单位在 android 和 iphone上面的一个坑
weixin_30793643的博客
04-10 646
在iphone上面父级如果设置width 为 200% 的话， 子级的rem也会翻倍。 android上面就没有问题。 不知道是为啥 转载于:https://www.cnblogs.com/Red-ButterFly/p/8780655.html
vue使用rem实现 移动端屏幕适配
12-01
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...
iosSelect使用rem单位适配示例
12-14
该示例中使用rem为单位，且1rem = 100px，如果需要改变1rem等于多少px，需要将css中的值和调用iosSelect.js时的itemHeight 和 headerHeight的值转换成rem
关于__Federico Milano 的电力系统分析工具箱.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
mlab-upenn 研究小组的心脏模型模拟.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
混合图像创建大师matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
中序遍历二叉树-java版本
04-26
在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。
无头单向非循环链表的实现（SList.c）
最新发布
04-26
无头单向非循环链表的实现（函数定义文件）
两个有序链表的合并pta
04-26
"PTA" 通常指的是一种在线编程平台，例如“Pata”或者某些特定学校或组织的编程练习与自动评测系统。在这种平台或系统中，学生或程序员会提交代码来解决各种问题，然后系统会自动运行并评测这些代码的正确性。 当提到“两个有序链表的合并PTA”时，这通常意味着在PTA平台上解决一个特定的问题，即合并两个有序链表。具体任务可能是给定两个已按升序排序的链表，要求编写代码来合并这两个链表，形成一个新的有序链表。
webpack 使用 rem
09-29
Webpack使用rem作为单位可以通过配置webpack.config.js文件来实现。在module.rules数组中添加一个rule对象，test属性使用正则表达式匹配.less文件，然后在use属性中添加相应的loader。其中，postcss-loader用于自动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值