px、em、rem、rpx 区别及应用场景
时间:2021-08-10
本文章向大家介绍px、em、rem、rpx 区别及应用场景,主要包括px、em、rem、rpx 区别及应用场景使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
px 像素 像素px是相对于显示器屏幕分辨率而言的
em 子元素字体大小的em是相对于父元素字体大小。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
rem 是css3新增的相对单位 <html>元素。和em 的区别是 rem 相对于根元素, 通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem
rem与em的选择?
如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用;
用于做响应式页面,不过我更倾向于rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。
px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px。
微信小程序同时也支持rem尺寸单位, rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx
原文地址:https://www.cnblogs.com/benbonben/p/15123903.html
- python多版本的pip共存问题解决办法
- C++ 对vector进行排序
- 小程序优化36计
- 神经网络权重初始化问题
- Andrew Ng机器学习课程笔记--week11(图像识别&总结划重点)
- 市民近期到南沙有望体验到无人驾驶技术
- Andrew Ng机器学习课程笔记--week10(优化梯度下降)
- Andrew Ng机器学习课程笔记--week9(下)(推荐系统&协同过滤)
- Andrew Ng机器学习课程笔记--week9(上)(异常检测&推荐系统)
- python程序员开发必备的5大工具,你用过几个?
- Andrew Ng机器学习课程笔记--week8(K-means&PCA)
- Andrew Ng机器学习课程笔记--week7(SVM)
- Pytorch windows10安装教程
- Udacity并行计算课程笔记-The GPU Programming Model
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- codeforces 1213D2(贪心+思维)
- codeforces 1426E(贪心)
- codeforces 1374E1(贪心+优先队列)
- codeforces 455A(dp)
- codeforces 1296E1(贪心+思维)
- codeforces 1216E1(数学+暴力)
- JDBC基础入门使用
- codeforces 1353E(dp)
- codeforces 1396A(构造)
- codeforces 1335E1+E2(思维)
- JSP开发基础入门学习1
- codeforces 1407C(数学+交互题)
- codeforces 1420C1
- codeforces 1417D(思维,构造)
- Servlet基础入门学习2