移动端字体大小单位rem
首先先将几个主要概念讲一下;
什么是移动端?
:移动端故名思义是为移动终端,大名叫移动通信终端,是指可以在移动中使用的计算机设备。其实就是我们常说的手机。
什么是布局?
:对事物的全面规划和安排,布:陈设;设置。前端开发中布局也就是将主要的html结构布置好。
rem是什么?
:R.E.M.是一支于1980年组建于美国的另类摇滚乐团....当然我们这里的rem不是指这个乐团了。
rem是一种长度单位,是而且仅是根据根元素html改变的长度单位。
Root em(REM)是CSS3中新定义的一种长度单位。和之前的em单位相比在使用上具有明显的优势。著名的响应式web框架Fundation就是用REMs作为基本的长度单位。
好,有了这几个共同的概念沟通起来就简单多了,要不然别人一看,嘿,布局?用rem?什么鬼,用乐团布局?城会玩啊。。。
来,喝完这杯还有一杯。接下来还有几个重要的概念需要交代一下;
什么是像素?
:中文全称为图像元素。像素仅仅只是分辨率的尺寸单位,而不是画质。
定义:是指在由一个数字序列表示的图像中的一个最小单位,称为像素。
物理像素:一个物理像素是显示器(手机屏幕)上最小的物理显示单位,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
设备独立像素:设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
设备像素比: 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,设备像素比 = 物理像素 / 设备独立像素;
在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr。
在css中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。
如果设备宽高是375X667 DPR为2的话,其物理像素就要相应的乘以2,也就是为750X1334;
这时候如果你设置的css像素为1px,那么在此设备上显示的就为2px。这对于布局来说会造成问题。所以我们要将它统一起来。这个统一也必须是动态的。那么我们怎么去动态改变呢?
答案是通过视口设置宽高缩放。
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
当然这是静态设置的,一旦换个DPR不同的设备就又会造成多1像素的问题。那么我们要怎么设置不同DPR的不同缩放比呢。
我们目标是,DPR为2的时候,initial-scale=0.5 ,DPR为3的时候,initial-scale=0.33333333。
相信大家都知道javascript,通过javascript我们可以动态的设置初始缩放。那么 how??
首先我们要获取dpr,在javascript中是通过: window.devicePixelRatio;来获取的。那么我就开始动态设置吧。
代码我在这写一遍方便咱们复制;
<script>
var pixel = 1/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixel+','+'minimum-scale='+pixel+','+'maximum-scale='+pixel+'">')
</script>
ok,到这我们就解决了1px的问题。
接下来我们就要解决布局单位的问题了;
首先我们知道布局单位有很多:
px:用这个布局的话,写出来的大小只能和设计稿上的一样了。一旦换个终端就GG了。所以这种单位不用考虑了。
%;百分比布局还是可以使用的,但如果是高度不确定的话就不适合了。
em:相对于父级,是个相对元素,一旦你要设置字体大小而又宽高不能统一,麻烦就来了。
rem:也是个相对元素,不过它只相对于根元素也就是html,用这个作为布局单位能做到适配各种终端,当然前提是动态改变了根元素的font-size.
所以如果你要做的适配大部分的手机终端,那么rem是个布局的好单位。前提是动态设置了html的font-size大小。让他随设备的改变而改变.
那我们要怎么动态改变呢,首先我们要获取当前设备的宽度,用它去除以一个常数,这样我们设置出来的font大小就是相对来说不变的。
获取宽度可以通过javascript:getBoundingClientRect().width;
相信这段代码很简单,我就不写一遍了。
进行布局的话建议用less去写,因为less中可以用变量,这样我们可以省去频繁用计算器的时间了。
less中我们可以这样写;
@rem:40rem; 定义变量@rem 这里的40是指你打开谷歌开发者工具后点击移动端模拟时的html的font-size大小。
div{
width:200/@rem; less会在编译的时候给计算出结果。
}
OK,到此我们的布局问题差不多就解决了。
总之,在head里写上这两段代码就解决了适配,1px,等问题了。
当然如果你用百分比布局的话,那也可以。
移动端字体大小单位rem相关推荐
- rem单位中html默认字号,轻松掌握CSS3中的字体大小单位rem的使用方法
CSS3中新的字体单位rem前段时间无意中在wordpress主题中接触到一种字体单位rem,当时我就很好奇,毕竟以前没有见过,于是我马上查找资料,并测试了一回. 众所周知在web中有很多字体单位(f ...
- 移动端css动态字体大小fontSize rem
css动态字体大小fontSize rem 设置参考标准 /* 说明:此处将整个手机端设置成100%,作为参考 */ html{font-size: 100%; } 设置具体字体 /* 说明:font ...
- 系统字体大小导致rem布局变大
缘由:内部测试都ok,交给客户看的时候,整天变大,本来7.5rem = 750px,实际上大了很多. 各种情况排除后,发现是客户手机字体大小调整到了特大号 解决办法 getComputedStyle方 ...
- 移动端Web适配单位rem的坑,oppo r9手机出现错位bug
我们做了一个抽奖的H5活动页面,被一个oppo R9手机客户反馈,抽奖的转盘错位了.刷新了好几次都不行.网上百度一搜真的有部分安卓手机有坑.赶紧修复bug.分享完整的rem.js代码出来.各位看官自己 ...
- H5移动端开发之基础字体大小设置
前段时间接触了h5移动端的开发,移动端字体大小不同于pc端一般直接用px单位,而是经常用rem作为基础单位,常规做法使用1rem=100px的换算方式,如果设计稿是375px作为整个屏幕端度的话,那么 ...
- ui设计移动端字体适配_UI设计稿中常见的单位及移动端适配
一.pt 在我们的设计稿中,经常看到以pt单位来标注的稿子,那么pt究竟是个什么单位?其实pt是用于印刷行业用来表示字体大小的单位,也叫做磅,用过word设置字体的应该不会陌生,它是一个绝对长度,为1 ...
- html字大小自适应,html字体大小自适应 怎样让HTML字体自适应到移动端?
如何设置 中的字体大小随 height变化而自 first line html如何实现字体大小的自适应字体的单位用百分比即可. html页面怎样能够自适应电脑屏幕宽度? 在1024*768或者800* ...
- 谷歌浏览器移动端部分字体大小与设定大小不同
问题描述:为了适配各种移动端设备,动态设置了viewport缩放,然后动态设置html的font-size大小,用rem布局.但是在谷歌浏览器中查看的时候出现了问题 1.这个没问题,font-size ...
- html中字体的单位,CSS中字体单位:px、em、rem和%
对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...
最新文章
- VMware虚拟机搭MAC系统
- HTML中点击div旋转,html – 180度旋转的div只能从一侧点击
- python中head_Python(Head First)学习笔记:六
- c语言手机教程,【图片】【教程】手机c语言入门与手机c编程【mrp吧】_百度贴吧...
- ogg for java_luogg_java学习_04_数组
- python打印文档添加条码_12行代码教会你用python读excel文件,提取数据,生成条形码...
- tomcat 虚拟目录与显示目录中文件列表
- 定时开关机cmd命令
- C#实现自动升级(附源码)
- 女生学大数据好还是计算机好?都适合女生吗?就业前景好吗?
- CodeForces - 767C Garland(附带易错数据)
- Win11 22H2四个你不知道的隐藏功能
- 2006年教育部对社会主义倒奶和资本主义倒奶的的标准回答
- 学习项目管理理论后的体会
- 【黄啊码】PHP压缩图片(简洁易懂版,不懂我下次不写)
- matlab 二阶低通滤波器,二阶无源RC滤波的MATLAB仿真
- Win10下徽标Win键组合快捷键大全
- arcgis中hgt格式的dem数据tiff转换
- FS_S5PC100平台上Linux Camera驱动开发详解(二)
- SOA期末复习知识点