rem布局完成响应式开发,通俗且详细的原理解析和代码实现

时间: 2019-04-29阅读: 556标签: rem

一、rem布局基本原理

原理:rem可以理解为一个长度单位,单位rem的值等于网页font-size的值。如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px。

根据这个原理,如果网页默认的字体大小改变,那么单位rem的大小也会改变,我们使用rem做单位的html元素的大小也会改变。

比如说:页面中一个div的宽度为2rem,在没有其他任何设置的情况下,他的大小就是32px,这时font-size改变为10px,那么这个div的宽度就会改变为20px。

根据上述原理,如果我们写一个js代码,实现屏幕越大font-size的值越大,rem的值也就会越大,就可以实现让页面元素的大小适应屏幕大小。这样不管你的网页是在iphone6/7/8、华为中兴还是小米魅族上显示,都能完美的适配。


二、rem布局代码实现

var pixclPatio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />');
var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 37.5+ 'px';

好多人用过这段代码,但是具体涵义却都很模糊,下面我将详细的解析一下:

var pixclPatio = 1 / window.devicePixelRatio; 

window.devicePixelRatio:设备像素比,顾名思义,是设备的实际像素/逻辑像素,实际像素很好理解,就是我们的物理设备屏幕像素点的个数,而css所用的px则是逻辑像素,通常逻辑像素和实际像素是不同的,通过这个window对象,我们就可以知道他们的比值。 

name="viewport"

viewport是设备显示网页的屏幕区域,viewport的宽高也就是屏幕逻辑像素的宽高。这个网站是被很多大神推荐过的,可以查阅不同型号手机的逻辑像素http://viewportsizes.com/

值得注意的是,很多浏览器会把viewport的宽度设置为980px,比如safari。为了解决这一问题,就需要这行代码

<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />

width=device-width 表示将viewport宽度设置为设备实际的宽度
initial-scale、minimum-scale、maximum-scale分别表示用户初始的缩放比例、最小缩放比例和最大缩放比例

如果这个缩放比例如果是1,那么1px逻辑像素=1像素点实际像素。如果比例是2,1px就等于2像素点。将他的缩放设置为1*1/window.devicePixelRatio(也就是代码中的变量pixclPatio),每个1px=逻辑像素/实际像素个像素点,那么整个html也会放大逻辑像素/实际像素倍。

var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 37.5+ 'px';

最后,获取html的宽度,将html的宽度/37.5赋值给字体的大小。

就实现了 设备 >> 像素比 >> 屏幕缩放 >> html >> font-size >> rem 这样一个传递链,也就实现了我们前面说的适配不同型号的设备。

要注意的是,这个37.5并不是固定的,只是设置为37.5正好在iphone6/7/8上1rem=20px,在iphone plus上等于30px,具体的大小可以根据需要来设置。


三、rem+响应式布局

上述方法只适应于手机,如果想让页面在手机端电脑端都能完美显示,还需要设置响应式布局:

<link media="screen and (max-width:640px)" rel="stylesheet" type="text/css" href="phone.css">

使用第二部分的rem布局之后,页面的宽度会被改变,我们在使用max-width:640px就匹配不到手机了。

为了解决这一问题,可以在js里加一个条件判断,这样css样式就可以正常引入

if (window.screen.width < 640){
    document.write('<link rel="stylesheet" href="css/phone.css">');
}

汇总一下,代码就是这样:

var pixclPatio = 1 / window.devicePixelRatio;
if (window.screen.width < 800){
    document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />');
    var html = document.getElementsByTagName('html')[0];
    var pageWidth = html.getBoundingClientRect().width;
    html.style.fontSize = pageWidth / 37.5+ 'px';
    document.write('<link rel="stylesheet" href="css/phone.css">');
}

这个代码虽然使用简单方便,但还是存在一些问题,比如加载比较慢、无法适配手机横屏等问题


原文来自:https://www.cnblogs.com/iszhangk/archive/2019/04/28/10787292.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3111

适用于移动设备弹性布局的js脚本(rem单位)

目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了

css中1px等于多少rem?

rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。rem 和 em 一样,也是一个相对大小的值,它是相对于根元素 <html>。

css rem应用

根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小,适应不同的屏幕比例。本文的px转rem换算公式为:100px = 1rem

了解并使用 CSS 中的 rem 单位

今天我们深度了解一下 rem 单位,这个单位目前已经得到了优秀浏览器的支持,并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。

rem js相关

规则就是,调用函数,放两个参数,第一个参数,是设计稿的宽度,第二个参数是px与rem的转换比例,通常会写100(因为好算);当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前加载

小程序如何实现rem?

最近在学习小程序,要把html的代码转换成小程序界面,其中就遇到了rem的转换问题,但小程序不太兼容rem,不是不能用rem,而是没办法设置根元素的font-size,因为rem是相对于根元素的font-size

移动端rem适配

1:css3的media query来实现适配,例如下面这样;2.通过js动态设置html字体,例如下面这样:默认设计图为640的情况下1rem=100px;根据自己需求修改

华为,小米部分机型微信浏览器rem不适配的解决方案

针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的rem不能正确填充满的问题,有如下解决方案,目前来看,产生这个情况的原因是因为给html附font-size时

移动端适配flexible rem布局方案

如果你看了很多篇文章,对 flexible 的解决方案一直还有一种不太了解的朦胧感觉,那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案,以及这套解决方案是如何作用的。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广