了解真实的rem手机屏幕适配

rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果。

rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配,但实际情况真有这么简单吗?

 首先我们来看看使用 rem 实现手机屏幕适配的常用方案。

以设计稿的宽度为640px,即:designWidth = 640,同时设定在640px屏宽下 1rem=100px ,即:rem2px = 100。

设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候,通过直接位移小数点的方式,就可以将UI图中测量到的 px 值换算成对应的 rem 值,方便快捷。

 

此外,在 head 中我们还设置了:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

viewport 的作用很重要,但不是本文的重点所以不展开,有兴趣的同学可以自行搜索。

 

先来看看具体方案:

 

下面四个方案原理都是采用等比缩放的方式 —— 获得目标屏幕宽度和设计稿宽度的比,作为 rem 的基值(缩放系数),设置为html标签的字体大小。不同的只是在于性能取舍和书写习惯。

方案1

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

方案2

@media screen and (min-width: 320px) {html{font-size:312.5%;}}
@media screen and (min-width: 360px) {html{font-size:351.5625%;}}
@media screen and (min-width: 375px) {html{font-size:366.211%;}}
@media screen and (min-width: 400px) {html{font-size:390.625%;}}
@media screen and (min-width: 414px) {html{font-size:404.2969%;}}
@media screen and (min-width: 440px) {html{font-size:429.6875%;}}
@media screen and (min-width: 480px) {html{font-size:468.75%;}}
@media screen and (min-width: 520px) {html{font-size:507.8125%;}}
@media screen and (min-width: 560px) {html{font-size:546.875%;}}
@media screen and (min-width: 600px) {html{font-size:585.9375%;}}
@media screen and (min-width: 640px) {html{font-size:625%;}}
@media screen and (min-width: 680px) {html{font-size:664.0625%;}}
@media screen and (min-width: 720px) {html{font-size:703.125%;}}
@media screen and (min-width: 760px) {html{font-size:742.1875%;}}
@media screen and (min-width: 800px) {html{font-size:781.25%;}}
@media screen and (min-width: 960px) {html{font-size:937.5%;}}

方案3

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize =((window.innerWidth / designWidth) * rem2px) + 'px';

方案4

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize =((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';

为了更避免理解上的混乱,我在上面js的代码中加了 ( ) ,实际代码中是不需要的。

详细分析一下,rem 和 px 直接的转换公式可以写为:

 

1rem = 1 * htmlFontSize

 

htmlFontSize 为 html 元素的字体大小。

 

首先来看方案1中,在屏宽为640px情况下的设置:

 

@media screen and (min-width: 640px) {html{font-size:100px;}}

 

可以很明显的表现出这一点 1rem = 1 * 100px ,同我们最初的设定。那么我们要得到其它屏幕大小的 htmlFontSize 值要怎么办。很简单如方案3,因为我们的采用等比缩放的方式适配,所以计算目标屏幕宽度和设计稿的宽度的比即可:

 

window.innerWidth / designWidth * rem2px + 'px'

 

由于浏览器默认字体大小为 16px,所以当我们使用百分比作为根节点 html 的字体大小时,即html元素的font-size值设置为一个百分比值,rem 的计算方式就会改为:

 

defaultFontSize = 16px

1rem = 1 * htmlFontSize * defaultFontSize

 

如方案2中,在屏宽为640px情况下的设置:

 

@media screen and (min-width: 640px) {html{font-size:625%;}}

 

应用上面的公式:

 

1rem = 1 * 625% * 16px

其中:625% * 16 = 6.25 * 16 = 100

所以:1rem = 1 * 100px

 

同样的可以得到所有屏幕大小下,html 的 font-size 值的计算公式,即为方案4:

 

window.innerWidth / designWidth * rem2px / 16 * 100  + '%'

 

通过方案3和方案4的公式,就可以很方便的生成方案1和方案2中的css。

 

转载于:https://www.cnblogs.com/cczlovexw/p/7458670.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369461.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JDBC查询Oracle全部表名称,如何使用JDBC API从Oracle数据库中的现有表中检索记录?...

您可以使用UPDATE查询来更新/修改表中记录的现有内容。使用此功能&#xff0c;您可以更新表的所有记录或特定记录。语法UPDATE table_nameSET column1 value1, column2 value2...., columnN valueNWHERE [condition];要使用JDBC API更新表中记录的内容&#xff0c;您需要-注…

JUnit与EasyMock合作

开发人员始终需要注意所产生的代码。 在实施新功能或修复某些错误之后&#xff0c;应确保它们能够正常工作。 至少可以借助单元测试来实现。 由于此博客致力于Java编程语言&#xff0c;因此今天我将撰写有关JUnit 4.1和EasyMock 3. 1框架的文章。 这些框架的主要目的是简化单元…

nodejs获取当前url和url参数值

//需要使用的模块 http url 当前url http://localhost:8888/select?aa001&bb002 var http require(http); var URL require(url); http.createServer(function(req, res){var arg url.parse(req.url).query; //方法一arg > aa001&bb002var arg url.parse(…

以A表中的值快速更新B表中记录的方法

1、问题描述 有两张表&#xff0c;A表记录了某些实体的新属性&#xff0c;B表记录了每个实体的旧属性&#xff0c;现在打算用A中的属性值去更新B中相同实体的旧属性&#xff0c;如下图所示&#xff1a; 类似这样的需求&#xff0c;怎样做比较高效呢&#xff1f; 2、制作模拟数…

linux日志文件备份,LINUX 自动备份程序日志(shell)

定期备份脚本案列用tar压缩7天前日志删除7天压缩完日志删除压缩完356天前日志#&#xff01;/bin/bash#delete expire log#script name drop_log#script default remove 7 day log and remove remove archived a year ago#make date 2015/06/15result_clientfind /orafile/app/s…

HTML 网页创建

最简单的方式就是创建一个文本文档&#xff0c;然后将.txt后缀改为.html或者htm。 完成上面的步骤会创建一个完全空白的网页&#xff0c;下面填充一点内容&#xff0c;代码实例如下: <!DOCTYPE html> <html> <head> <meta charset" utf-8">…

Hadoop赠品–综述

各位极客&#xff0c; Packt Publishing关于Apache Hadoop 的书籍赠品已经结束。 您可以在此处找到比赛的原始帖子。 获奖者 将会获得这本书奖的6位幸运获奖者是&#xff08;姓名出现在他们的电子邮件中&#xff09;&#xff1a; Hadoop真实世界解决方案手册 Sellamuthu&…

企业级应用与互联网应用的区别

企业级应用&#xff1a;商业组织、大型企业而创建并部署的解决方案及应用。涉及的外部资源众多、事务密集、数据量大、用户众多、同时必须有较强的安全性考虑。 企业应用和互联网应用从根本来说是相同的&#xff0c;都是基于因特网、HTTP、浏览器的一种应用&#xff0c;但面向的…

hdu-2602 Bone Collector

题目 http://acm.hdu.edu.cn/showproblem.php?pid2602 分析 基础背包问题,有一个容量为V的背包,各种骨头有大小和价值两种属性,求背包能装的骨头的最大价值. AC代码 #include "bits/stdc.h" using namespace std; int val[1010], vol[1010], dp[1010]; int main(int…

linux vfs open函数,Linux VFS中open系统调用实现原理

用户空间的函数在内核里面的入口函数是sys_open通过grep open /usr/include/asm/unistd_64.h查找到的#define __NR_open2__SYSCALL(__NR_open, sys_open)观察unistd_64.h&#xff0c;我们可以猜测用户空间open函数最终调用的系统调用号是2来发起的sys_open系统调用(毕竟glibc一…

从如何停掉 Promise 链说起

在使用Promise处理一些复杂逻辑的过程中&#xff0c;我们有时候会想要在发生某种错误后就停止执行Promise链后面所有的代码。 然而Promise本身并没有提供这样的功能&#xff0c;一个操作&#xff0c;要么成功&#xff0c;要么失败&#xff0c;要么跳转到then里&#xff0c;要么…

JAXB教程–入门

注意&#xff1a;请查看我们的Java XML绑定JAXB教程– ULTIMATE指南 什么是JAXB&#xff1f; JAXB代表用于XML绑定的Java体系结构。它用于将XML转换为java对象&#xff0c;并将java对象转换为XML。JAXB定义了一个用于在XML文档中读写Java对象的API。与SAX和DOM不同&#xff0c…

《Kubernetes权威指南第2版》学习(二)一个简单的例子

1&#xff1a; 安装VirtualBox, 并下载CentOS-7-x86_64-DVD-1708.iso&#xff0c; 安装centOS7,具体过程可以百度。 2&#xff1a;开启centOS的SSH&#xff0c; 步骤如下&#xff1a; &#xff08;1&#xff09; yum list installed | grep openssh-server查看是否已经安装了SS…

create_volume.go

package apiimport ("net/http""io/ioutil""errors""fmt")//创建存储空间func CreateVolume(host string, port int, vid uint64) error {url : fmt.Sprintf("http://%s:%d/%d/", host, port, vid)resp, err : http.Post(ur…

linux 安装ftp下载,LINUX FTP安装与配置

转载了一篇配置vsftpd服务器的文章&#xff0c;经过自己的配置&#xff0c;终于搞定了&#xff01;1.安装vsftpdXml代码 yum install vsftpd2.启动/重启/关闭vsftpd服务器Xml代码 [rootlocalhost ftp]# /sbin/service vsftpd restartShutting down vsftpd: [ OK ]Starting vs…

使用Hibernate批量获取

如果需要从Java处理大型数据库结果集&#xff0c;则可以选择JDBC&#xff0c;以提供所需的低级控制。 另一方面&#xff0c;如果您已在应用程序中使用ORM&#xff0c;则回退到JDBC可能意味着额外的麻烦。 在域模型中导航时&#xff0c;您将失去乐观锁定&#xff0c;缓存&#x…

c语言 static的用法

static在c里面可以用来修饰变量&#xff0c;也可以用来修饰函数。先看用来修饰变量的时候。变量在c里面可分为存在全局数据区、栈和堆里。其实我们平时所说的堆栈是栈而不是堆&#xff0c;不要弄混。int a ;int main(){ int b ; int c* (int *)malloc(sizeof(int));}a是…

前端经典面试题 不经典不要star!

前言 (以下内容为一个朋友所述)今天我想跟大家分享几个前端经典的面试题,为什么我突然想写这么一篇文章呢?今天我应公司要求去面试了下几位招聘者,然后又现场整不出几个难题,就搜了一下前端变态面试题! HAHA&#xff0c;前提我并不是一个变态,欺负人的面试官.只是我希望看看对…

CSS的常见问题

1.css的编码风格 多行式&#xff1a;可读性越强&#xff0c;但是CSS文件的行数过多&#xff0c;影响开发速度&#xff0c;增大CSS文件的大小 一行式&#xff1a;可读性稍差&#xff0c;有效减少CSS文件的行数&#xff0c;有利于提高开发速度&#xff0c;减小CSS文件的大小 2.id…

linux 磁盘科隆,Linux中ln命令用法详解(硬链接)

硬连接指向的是节点(inode),是已存在文件的另一个名字,修改其中一个,与其连接的文件同时被修改;对硬链接文件进行读写和删除操作时候&#xff0c;效果和符号链接相同。但如果我们删除硬链接文件的源文件&#xff0c;硬链接文件仍然存在&#xff0c;而且保留了原有的内容。这时&…