一、功能实现

第一步

<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

第二步

    <style>body{ font-size: 16px;}</style>

第三步

    <script>var fontSize = window.innerWidth / 3.75;   // 3.75为你所用的开发设备的屏幕大小除100，总之保证开发时值为100 document.documentElement.style.fontSize = fontSize + 'px';//修改html的font-size值</script>

第四步

正常编写代码，将带px单位的值除100转化为rem单位，例如: 20px => 0.2rem

推荐插件：vscode插件 px to rem ，不知道其他开发工具有没有，自己搜一下。安装好后，在扩展设置改Px-per-rem为100，选中px数值后按alt + z自动进行数值转换

二、实现原理

1、开启Web页面缩放，并对相关的选项进行设定
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

2、设置html的font-size的值
rem单位是相对单位，根据屏幕分辨率的不同，会进行换算的，在本篇中1rem相当于100px，一般用于不同分辨率下，等比缩放的布局。
window.innerWidth / (开发设备宽)/100，动态修改用户屏幕与开发屏幕比例对应的font-size值。这里设置初始值为100px，其实设置多少都无所谓，只是设置成100方便单位转换。

3、设置body改回默认font-size
html样式将字体默认大小修改了，所以要在body处改回来。

总结：像图片、文字、图形啥的只要都用的是rem单位，就能不改变布局实现等比缩放。

超简单的页面（图片、文字、布局。。。）等比缩放相关推荐

计算机画图怎样更改文字,如何在图片上改字|超简单的修改图片里文字方法
这篇文章将要给大家介绍的是,不用联网,不用下载专业的图像处理软件,单纯用画图工具,就能修改表情包.图片上文字的方法,只适合简单的图片处理,复杂的还是交给专业的图像处理工具吧.下面系统吧就给大家带来修改 ...
html中的ppt文字不清晰,HTML页面的文字布局与文字效果.ppt
无序列表是一种"项目符号列表".其中的项目都带有项目符号前缀.该列表包含在无序列表标记 .. 内.列表中的每个项目都使用列表标记进行标记,其中LI表示List Item(列表项). ...
android 图片文字布局,Android自定义控件图片+文字布局
本来想用Tabrow来布局一组上面是图片下面是文字说明的控件,可是发现Tabrow不像想象的那样简易,并且这几组之间的控件距离很差把握,在网上找了两种方法以供参照.html 方法1.利用RadioBu ...
Android自定义控件图片+文字布局
原本想用Tabrow来布局一组上面是图片下面是文字说明的控件,但是发现Tabrow不像想象的那样简易,而且这几组之间的控件距离不好把握,在网上找了两种方法以供参照. 方法一.利用RadioButton ...
android 图片文字布局,Android代码实现图片和文字上下布局
在Android开发中经常会需要用到带文字和图片的button,下面来给大家介绍使用radiobutton实现图片和文字上下布局或左右布局.代码很简单就不给大家多解释了. 布局文件很简单,用来展示Ra ...
php360随机壁纸图片接口,PHP超简单的随机图片头像API接口网站搭建教程
摘要向上文所说,为了其他邮箱调用随机图片,我当时特意去网上找了些随机图片API接口网站,发现他们API接口有点慢,本着不外链的精神,自己搭建了个随机图片and头像的API接口.在这里把教程分享给大家 ...
超简单的魔幻霓虹灯文字特效 html+css
话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~ 这个效果很简单看一分钟就明白了~ 初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3 ...
如何快速处理图片？超简单实用的图片处理工具推荐
相信大家在平时的工作中都碰到过需要处理图片的情况,例如图片上有一些有瑕疵的边边角角需要去掉.图片背景不好看需要给图片抠图后换个背景等等,这些图片处理时一般需要借助一些专业的图片处理工具或者需要一定的专 ...
超简单！为图片和 PDF 上去掉水印
文 | 某某白米饭来源:Python 技术「ID: pythonall」网上下载的 pdf 学习资料有一些会带有水印,非常影响阅读.比如下面的图片就是在 pdf 文件上截取出来的. 安装模块 PI ...

超简单的页面（图片、文字、布局。。。）等比缩放

rem实现页面等比缩放

一、功能实现

二、实现原理

超简单的页面（图片、文字、布局。。。）等比缩放相关推荐

最新文章

热门文章