基于rem的移动端响应式适配方案(详解)


Posted in Javascript onJuly 07, 2017

视口

在前一段时间,我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发,对viewport有了新的理解。于是,打算重新写一篇文章,介绍移动端视口的相关概念。

关于这篇文章说到的所有知识,本质上离不开以下代码

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

@media all and (max-width: 320px) {
 // do something
}

了解过移动端开发的朋友,其实对以上的代码就不会陌生。上面的代码,主要涉及到meta视口标签与媒体查询。单单以上简短的代码就需要明白:

像素(pixel)

视口(viewport)

分辨率(resolution)

meta视口标签

媒体查询(media query)

JavaScript相关的属性和方法

如何实现移动端响应式适配的问题

那就进入主题吧:)

像素

在移动端上,所谓的像素分为两种

CSS像素:CSS像素就是我们在编写CSS代码时的像素。

设备像素:设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。

1个CSS像素等于多少个设备像素取决于屏幕特性(是否是高清屏)和用户缩放的比例。当用户将屏幕从100%放大到200%时,1个CSS像素等于2个设备像素,反之相反;当屏幕为Retina高清屏(如iPhone6,dpr=2)时,1个CSS像素就等于2个设备像素,反之相反。

需要明白一点的是,2个设备像素并不是说它扩大了两倍,而是说在页面上仍然显示的是1px(1个CSS像素),但是这1px是由2个设备像素组成。像素点变多了,因此图像会变得更加清晰。下面这幅图大致说明了CSS像素和设备像素的区别。

基于rem的移动端响应式适配方案(详解)

视口

在移动端上,存在三种不同的视口。

布局视口:在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕。在移动端,默认情况下,布局视口等于浏览器窗口宽度。布局视口限制了CSS的布局。在JavaScirpt上获取布局视口的宽度可以通过document.documentElement.clientWidth | document.body.clientWidth得到。

基于rem的移动端响应式适配方案(详解)

视觉视口:视觉视口是用户正在看到的区域。用户可以缩放来操作视觉视口,而不影响视觉视口的宽度。视觉视口决定了用户看到了什么。在JavaScript上获取视觉视口的宽度可以通过`window.innerWidth得到。

在PC端上,视觉视口等于布局视口的宽度,无论用户是放大屏幕还是缩小屏幕,这两个视口的宽度仍然相等。但是,在移动端上,并非如此。缩放屏幕的过程实质上就是CSS像素缩放的过程。当用户将屏幕放到到两倍时,视觉视口变小了(因为视觉视口中CSS像素变少了),而每单位的CSS像素却变大了,因此1px(1个CSS像素)等于2个设备像素。同理,当为iPhone6(dpr=2)时,视觉视口中CSS像素变少了,但是1px等于2个设备像素。当用户缩小屏幕时也是同样的道理。缩放的过程并不会影响布局视口的大小。

也就是说,高清屏(dpr>=2)或屏幕放大时,视觉视口变小(CSS像素变少),每单位的CSS像素等于更多的设备像素;非高清屏(dpr<2)

或屏幕缩小时,视觉视口变大(CSS像素变多),每单位的CSS像素等于更少的设备像素。

但是无论放大或缩小屏幕,布局视口的宽度仍然保持不变。

理想视口:由于默认情况下布局视口等于浏览器窗口宽度,因此在移动端上需要通过放大或缩小视觉视口来查看页面内容,这当然体验糟糕啊!因此在移动端引入了理想视口的概念。理想视口的出现必须需要设置meta视口标签,此时布局视口等于理想视口的宽度。常见的,iPhone6的理想视口为375px * 667px,iPhon6 plus的理想视口为414px * 736px。在JavaScript上获取视觉视口的宽度window.screen.width得到。

<meta name="viewport" content="width=device-width" />

当设置了meta视口标签之后,iPhone6的布局视口宽度将等于375px,iPhone6plus布局视口的宽度等于414px。其他移动设备相似。

理想视口会随着屏幕的旋转而改变。当iPhone6为肖像模式时(即竖屏),此时理想视口为375px * 667px;但为横屏模式时,此时理想视口为667px * 375px。

分辨率与设备像素比

分辨率是指每英寸内点的个数,单位是dpi或者dppx。设备像素比是指设备像素与理想视口宽度的比值,没有单位。

分辨率在CSS上可以通过resolution属性设置。一般情况下会使用dpi作为分辨率的单位,因为dppx并非所有浏览器都支持。

而设备像素比在CSS上可以通过device-device-pixel-ratio属性设置,而在JavaScript上可以通过window.devicePixelRatio属性获取。

同时,1dpr=96dpi。举个例子。在iPhon6下,理想视口宽度为375px,而设备像素为750px,因此此时设备像素比为2,分辨率为192dpi。因此如果为iPhon6以下的设备写某个特定样式,可以这样写

// 注意,device-pixel-ratio需要带上-webkit-前缀,保证浏览器兼容性问题。
@media all and (max-width: 375px) and (-webkit-max-device-pixel-ratio: 2) {
 body {
 background-color: red;
 }
}
或者
@media all and (max-width: 375px) and (max-resolution: 192dpi) {
 body {
 background-color: red;
 }
}

meta视口标签

meta视口标签是是设置理想视口的重要元素,主要用于将布局视口的尺寸和理想视口的尺寸相匹配。meta视口标签存在5个指令

width:设置布局视口的宽度,一般设为device-width。

initial-scale:初始缩放比例。1即100%,2即200%,以此类推

maximum=scale:最大缩放比例。

minimum-scale:最小缩放比例。

user-scalable:是否静止用户进行缩放,默认为no。

需要注意的是,缩放是根据理想视口进行计算的。缩放程度与视觉视口的宽度是逆相关的。也就是说,当你将屏幕放到到2倍时,视觉视口为理想视口的一半,此时每单位的CSS像素等于2个设备像素。缩小时则相反。

响应式适配问题

理解了一些基本概念之后,我们来看看如何实现响应式适配。

一般情况下,前端开发工程师会根据设计师给的设计稿进行开发。而设计稿一般是根据iPhon6手机进行页面的设计的。我们知道iPhone6的理想视口宽度为375px,同时iPhone6的设备像素比为2,设备像素为750px。我们需要在只有一份设计稿的情况下写出适应各种屏幕不一的终端设备,因此需要一些移动端响应式适配的方案。此时需要用到的一个单位是REM。简单的说,REM会根据HTML元素的font-size进行设置。当HTML元素的font-size: 16px时,1rem = 16px, 1.5rem = 24px

个人总结出了两套响应式适配的方案(前提是设置meta视口标签)。两套方案由一个共同点:给定一个基准值。

假如现在拿到的设计稿是根据iPhone6进行设计的。

方案一

方案一是设计稿给什么尺寸,我们就将其缩小100倍,最后换算成rem单位。比如,设计稿上某个title的font-size为32px,此时写CSS样式时就直接缩小100倍,即0.32rem。

由于rem是根据根元素进行设置的,所以我们需要设置根元素的font-size。

给HTML设置font-size的基本思路:

通过window.screen.width获取不同移动设备的理想视口宽度。

规定基准值为750px(此值为iPhon6的设备像素)。

(1) / (2) * 100即得到HTML元素的font-size。(乘于100是因为我们在前面将字体缩小了100倍,此时要乘回来)

换算成公式即:设计稿尺寸 / 100 * (不同设备的理想视口宽度 / 基准值 * 100)

举个例子。

// 根据不同设备的理想视口宽度动态设置根元素的`font-size`。
let idealViewWidth = window.screen.width;
const BASICVALUE = 750;
document.documentElement.style.fontSize = (idealViewWidth / BASICVALUE) * 100 + 'px';

因此,在不同设备下的HTML元素的font-size大小和实际像素如下

iPhone5 : (320 / 750) * 100 = 42.667px
iPhone6 : (375 / 750) * 100 = 50px
iPhone6+: (414 / 750) * 100 = 55.2px

假如设计稿上标注.title类上的字体为32px,此时有

iPhone5上的某字体: 42.667 * 0.32rem = 13.653px
iPhone6上的某字体: 50 * 0.32rem = 16px
iPhone6+上的某字体: 55.2 * 0.32rem = 17.664px

可以看出,在不同设备下,同一字号的字体使用rem单位可以实现不同设备的响应式适配。不单单在字体上可以使用,在移动端上的width、height等涉及单位的都可以使用。这样的话,就可以在不同设备下完美的复现设计稿的要求。

方案二

此方案使用了SASS预处理器。基本思路:

设置根元素的font-size。通过获取不同设备的理想视口宽度,再除以10。(除以10是因为不想font-size太大。)

给定基准值,此时给的基准值为75px(此值为iPhone6的设备像素除以10)

写SASS Function

代码如下

SASS
@function px2rem ($value) {
 $para: 75px;
 @return $value / $para + rem;
}

JS
let idealViewWidth = window.screen.width;
document.documentElement.style.fontSize = idealViewWidth / 10 + 'px';

在不同设备下根元素的`font-size`:

iPhone5 : 320px / 10 = 32px
iPhone6 : 375px / 10 = 37.5px
iPhone6+: 414px / 10 = 41.4px

根据以上,可以看一个例子。某设计稿下5个li,横向排布,每个的宽度为200px
CSS
@import (路径名)
iPhone5: li { width: px2rem(200px) } => width: 85.333px
// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (320 / 10) = 85.3333px
iPhone6: li { width: px2rem(200px) } => width: 100px
// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (375 / 10) = 100px
iPhone6+: li { width: px2rem(200px) } => width: 4138px
// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (414 / 10) = 110.4138px

因此,一个200px的(实际只有100px)的li元素的宽度在不同设备下显示了不同的宽度,实现了响应式适配的问题。

方案三

方案三与前两个方案不相同,此方案并不需要给根元素设置font-size,不需要基准值。此方案是根据不同设备的dpr来实现页面的缩放的。

基本思路如下:

通过window.devicePixelRatio获取设备的dpr

根据不同的dpr缩放页面,动态设置meta视口标签。(缩放是放大或缩小CSS的过程,根据理想视口进行缩放,与视觉视口方向相反)

代码如下:

let dpr = window.devicePixelRatio;
let meta = document.createElement('meta');
let initialScale = 1 / dpr;
let maximumScale = 1 / dpr;
let minimumScale = 1 / dpr;
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', `width=device-width, user-scalable=no, initial-scale=${initialScale}, maximum-scale=${maximumScale}, minimum-scale=${minimumScale}`);
document.head.appendChild(meta);

因此,可以直接根据设计稿的尺寸写CSS样式,如设计稿下有5个li元素,宽度为200px,此时不同设备下li的宽度

iPhone5 : li { width: 200px } 实际宽度为:100px
iPhone6 : li { width: 200px } 实际宽度为:100px
iPhone6+: li { width: 200px } 实际宽度为:66.667px

以上三种方法解决了大部分移动端响应式适配的问题,但是在1px问题上,使用以上的方法仍然(除了第三个方案),都不能很好的解决1px的问题。有时间写一篇文章介绍如何解决1px的问题。

以上这篇基于rem的移动端响应式适配方案(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 图片缩放(按比例)控制代码
May 27 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
详谈js模块化规范
Jul 07 #Javascript
使用JavaScript实现alert的实例代码
Jul 06 #Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 #Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 #Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 #Javascript
详解微信小程序Radio选中样式切换
Jul 06 #Javascript
Node.js 回调函数实例详解
Jul 06 #Javascript
You might like
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP使用JSON和将json还原成数组
2015/02/12 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
JS实现图片切换特效
2019/12/23 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
留学推荐信写作指南
2014/01/25 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Python中super().__init__()测试以及理解
2021/12/06 Python