关于rem移动端 html字体大小自适应设置的问题
rem是个单位,单位大小由它第一代祖先font-size的大小决定rem的大小。
了解字体大小的同时我们要知道像素是什么东西。
像素是屏幕的组成元素,我们看到屏幕上的内容都是由一个个小颗粒构成的,而这些小颗粒我们叫做物理颗粒。
设备的像素比(简称DPR)
它的数值体现了物理像素和逻辑像素之间的关系,用公式可以计算出该设备的DPR的大小:
DPR=物理像素/逻辑像素
那么逻辑像素是什么呢?
逻辑像素是CSS像素,CSS样式代码中使用的是逻辑像素,比如font-size使用的就是逻辑像素。
如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题。但是,在iphone 4中,物理像素是640px*960px,而逻辑像素数为320*480px。因此,需要使用大约4个物理像素来显示一个CSS像素。
注意CSS中的1px并不等于设备的1px,在web端中1px是等于电脑屏幕的1物理像素,所以有一种错觉,觉得CSS中的像素就是设备的物理像素,但是却不是这样的,css中的像素单位只是一个抽象单位,在不同的设备和不同环境下,css中的1px所代表的设备物理像素是不同的。
看到这里差不多就了解为什么我明明设置了font-size:12px;却在手机端上变小了,这是因为DPR的原因,在电脑上的DPR是1,但是换算到手机端上的DPR可能就是2或者3。
那么如何获取到设备的DPR呢?
第一种是在JavaScript中,通过window.devicePixelRatio来获取;
第二种是在css中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同DPR的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。
这里有几种常用的动态设置rem的方法:
第一种是通过媒体查询的方式将html的font-size进行改变大小
@media screen and (min-width: 320px) { //最小宽度在320以下字体大小是14pxhtml {font-size: 14px;}
}@media screen and (min-width: 360px) { //最小宽度在360以下字体大小是16pxhtml {font-size: 16px;}
}@media screen and (min-width: 400px) { //最小宽度在400以下字体大小是18pxhtml {font-size: 18px;}
}@media screen and (min-width: 440px) { //最小宽度在440以下字体大小是20pxhtml {font-size: 20px;}
}
第二种是通过js来换算动态设置在html标签上,并动态设置html的font-size,利用css的选择器根据DPR来设置不同DPR下的字体大小(也是最推荐的一种方式)
可以利用手机淘宝的flexible设计与实现,可以达到自动适配的效果。
https://blog.csdn.net/TCF_JingFeng/article/details/81164767
关于rem移动端 html字体大小自适应设置的问题相关推荐
- html5纯css字体大小自适应设置
css 字体大小自适应样式设置篇 字体可以设置大小使用css font-size来实现,有时需要对字体大小根据浏览器分辨率来判断后自适应大小. 在CSS 2.0中字体大小自适应是难实现的,一般使用JS ...
- 使用rem,使字体大小自适应屏幕
rem是CSS3新增的一个相对单位(root em,根em).这个单位与em区别在于使用rem为元素设 定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点 ...
- HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
- html 字号自适应,html自适应网页里字体大小自适应屏幕的方法
html自适应网页里字体大小自适应屏幕的方法 发布时间:2020-11-20 16:40:22 来源:亿速云 阅读:216 作者:小新 这篇文章主要介绍了html自适应网页里字体大小自适应屏幕的方法, ...
- 字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案 参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
- 使用阿里云的oss对图片加水印并且字体大小自适应(阿里云oss暂不支持字体大小自适应)
使用阿里云的oss对图片加水印并且字体大小自适应(阿里云oss暂不支持字体大小自适应) 背景: 首先阿里云oss云对象存储是不能做到字体大小自适应的,因为在开发中我们的图片上传的尺寸是做不到固定大小宽 ...
- pyqt5标签中的字设置不同字体_PyQt5 实现字体大小自适应分辨率的方法
最近遇到一个现象,将做好的软件放在更高分辨率的电脑上运行,会导致字体显示不完全,出现被控件遮挡的情况.具体原因可以上网查询,在这里将记录下解决方法. 这里记录两种方法,如果使用的Qt版本在5.6.0之 ...
- js设置字体大小自适应屏幕分辨率
js可以通过 screen.width获取屏幕分辨率的大小. var conf_div = document.createElement('div'); //创建div conf_div.style. ...
- echarts-折线图-echarts字体大小自适应
<template><div><div><!--为echarts准备一个具备大小的容器dom--><div id="org_ech_li ...
最新文章
- C#是否该支持“try/catch/else”语法
- Ubuntu命令终端查看使用过的命令
- 内存泄漏和内存溢出有什么区别
- 2016奥运男篮分组
- nas servers
- iOS并发编程指南之同步
- C++和Python的交互
- list 索引 java_如何在Java中保持List索引的固定
- java 有哪些反射机制_Java 的反射机制你了解多少?
- python输入整数_Python中实现输入一个整数的案例
- python unittest库的入门学习
- 【转】python类中super()和__init__()的区别
- AngularJS快速入门指南09:SQL
- el-popover超过固定高度后出现滚动条_「测绘精选」RTK测量不出现固定解的原因...
- 关于修改docker(非docker-engine)的日志引擎
- 使用nvl就不能groupby了吗_现在的手机大部分都不能换电池,使用1至2年就需要更换吗?...
- CentOS node,npm,cnpm 环境部署
- 微信的APP支付开发,服务端和支付端的问题
- python pandas to_csv 最左边 多一列 索引值 问题处理
- android 视频转码需要权限,android 使用 ffmpeg 进行视频转码(一)