rem布局完成响应式开发,通俗且详细的原理解析和代码实现
一、rem布局基本原理
rem可以理解为一个长度单位,单位rem的值等于网页font-size的值。如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px。
根据这个原理,如果网页默认的字体大小改变,那么单位rem的大小也会改变,使用rem做单位的HTML元素的大小也会改变。
比如说:页面中一个div的宽度为2rem,在没有其他任何设置的情况下,他的大小就是32px,这时font-size改变为10px,那么这个div的宽度就会改变为20px。
那么如果能把font-size的值和屏幕的大小关联起来,就可以实现屏幕变大>>font-size变大>>单位rem的值变大。有了这样一个关联,只要把页面中元素的单位全部设置为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">');
}
这个代码虽然使用简单方便,但还是存在一些问题,比如加载比较慢、无法适配手机横屏等问题,如果您有更好的解决方法,欢迎批评指正。
rem布局完成响应式开发,通俗且详细的原理解析和代码实现的更多相关文章
- 用rem来做响应式开发
强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位 ...
- 用rem来做响应式开发(转)
由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他 ...
- rem布局及响应式布局
流式布局(100%布局)(可能:做的页面不是很美观)效果与弹性布局一样 不设置宽高:表示宽 auto 最外层:保证100% 等比例缩放的算法: 320/10 已知的一个比例 = 已知的宽/x ...
- 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发
rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...
- 移动 WEB 开发的布局方式 ---- 响应式布局
一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...
- 带你玩转JavaWeb开发之五-如何完成响应式开发页面
响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...
- 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
- 基于screen.width的伪响应式开发
一.站在用户的角度看问题 一个用户,访问一个web页面的真实场景是怎样的呢? 下面是某用户访问某站点的一个场景: 1. 小明打开了自己的电脑,访问了鑫空间-鑫生活: 2. 小明体内洪荒之力无法控制,疯 ...
随机推荐
- 高可用Redis(三):Hash类型
1.哈希类型键值结构 哈希类型也是key-value结构,key是字符串类型,其value分为两个部分:field和value 其中field部分代表属性,value代表属性对应的值 上面的图里,us ...
- css3基本属性
一.css属性:1.层叠性:当出现相同的选择器时,属性冲突的时候,后面的属性会把前面的属性 覆盖掉. 2.继承:当存在父子关系的时候,子元素会继承父元素的部分属性 注意: a标签不会继承颜色:h标签不 ...
- Docker commit 命令保存的镜像文件太大的问题
基础镜像: centos7.5 进入容器后, 先后安装了 jdk1.8, maven3.6.0, git, rocketmq4.3.2 安装完成后使用 docker commit 命令保存为镜像 结果 ...
- shell实用
nginx日志切割 [root@localhost ~]# vim /opt/fenge.sh #!/bin/bash #Filename:fenge.sh d=$(date -d "-1 ...
- Android OS 源码 引入和编译 jar / so库
Android -- 源码平台下JAR包的引入与编译https://blog.csdn.net/csdn_of_coder/article/details/64538227 BUILD_JAVA_LI ...
- BootstrapTable,选中某几行,获取其数据并进行后台处理。以及其他的属性使用。
参考链接:bootstrap Table API 中文版 Bootstrap Table 选中某几行,获取其数据 Ajax传递数组,struts2接收数组 1.首先将复选框搞出来,<table ...
- kubernets helm 如何删除tiller
https://stackoverflow.com/questions/53612553/how-to-uninstall-remove-tiller-from-kubernetes-manually ...
- 实现定时备份mysql数据库并把备份数据库邮件发送
一.先来看备份mysql数据库的命令 1 mysqldump -u root --password=root --database abcDataBase > c:/abc_backup.sql ...
- 从分布式一致性到共识机制(二)Raft算法
春秋五霸说开 春秋五霸,是指东周春秋时期相继称霸主的五个诸侯,“霸”,意为霸主,即是诸侯之领袖.典型的比如齐桓公,晋文公,春秋时期诸侯国的称霸,与今天要讨论的Raft算法很像. 一.更加直观的Raft ...
- 【Vue】动态加载Html片段
在编写Vue页面的时候,会碰到这么一个需求.由于页面组件比较多,不可能一次性将所有的页面都打包,只能按需获取相应的页面进行显示. 比如有一个App页面,需要异步获取html片段通过v-html指令加载 ...