详解如何使用rem或viewport进行移动端适配


Posted in HTML / CSS onAugust 14, 2020

在开发移动端界面时,移动端适配一直是一个比较头疼的事情,常见的移动端适配有viewport适配,rem适配,百分比适配等等,在这里我们只介绍viewport适配和rem适配。看完这篇文章相信你应该会实战操作移动端对于不同手机大小的适配问题了。

一:rem适配

rem是指相对于根元素的字体大小(font-size)的单位,根标签的font-size=1rem。其可以称作为相对单位,也就是说我们可以通过视口的大小动态更新根元素字体大小(font-size)的值,从而动态更新rem所相对的值,使用使得移动端网页能够适配各种型号的手机。话不多说先上代码。

js代码(用于动态修改其根标签font-size的值):

<script type="text/javascript">        
        //rem适配
        //rem适配原理:改变了一个元素在不同设备上占据的css像素的个数
        /*rem适配的优缺点
            优点:没有破坏完美视口
            缺点:px值到rem的转换太复杂*/
            
        (function(){
            var styleNode = document.createElement("style");
            /* 当不除以16时此时1em便占据视口宽度,
            那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */
            // var w = document.documentElement.clientWidth;
            /* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */
            var w = document.documentElement.clientWidth/16;//获取视口大小
            /* 设置此时根元素的fontsize,向html的style样式中添加font-size属性*/
            styleNode.innerHTML = "html{font-size:"+w+"px!important}";
            //向head标签中添加style标签,其中包含html{font-size:w;}
            document.head.appendChild(styleNode);
        })()
    </script>

html与css代码:

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                width: 2rem;
                height: 2rem;
                background: pink;
                text-align: center;
                line-height: 2rem;
            }
        </style>
    </head>
    <body>
        <div id="test">test</div>
    </body>

我们来看一下通过改变手机的型号(视口的大小)对于页面的元素有什么变化。

详解如何使用rem或viewport进行移动端适配

详解如何使用rem或viewport进行移动端适配

从上述两张图我们可以看出,当我们改变手机的型号后(改变完成后记得要刷新哦),视口的大小也发生了改变,对于test元素的宽高也发生了改变,此时我们就能够进行进行移动端适配了。

rem适配原理

改变了一个元素在不同设备上占据的css像素的个数

rem适配的优缺点

  • 优点:没有破坏完美视口
  • 缺点:px值转换rem太过于复杂(下面我们使用less来解决这个问题)

less+rem解决转换复杂问题

使用less中进行运算,减少了我们手动进行计算所需要的rem值,也可以使用stylus,scss等css预处理器,来进行对于rem的运算,该例子需要结合上述js代码来进行搭配。

此时我们的less代码为:

/* 此时我们的750为设计图大小,具体值应该跟随设计图大小来进行设置 */
/* 对于750/16rem的逻辑为:因为16rem为占据页面的总宽,所以750(设计图的宽度)/16rem得出1rem与设计图的等比 */
/* 这个适合我们就可以根据该元素在设计图的宽度来设计大小啦,例如test的宽高为200px,那么我们就可以这样来写: */
    @rem:750/16rem;
    #test{
              width: 200/@rem;
              height: 200/@rem;
              background: pink;
              text-align: center;
              line-height: 200/@rem;
          }

注意!需要结合上述的js代码来一起使用哦!

二:viewport适配

对于viewport适配,实际是更改视口的大小,也就是说可以将其当作近大远小的原理,当减小视口宽度之后当前元素的可视大小也会减小,当增加视口宽度之后当前的元素可视大小会增大。从而进行移动端的适配。话不多说继续上代码:

js代码:

(function(){
             /* targetW的值为设计图的宽度大小,此时设置的宽度大小为640 */
            var targetW = 640;
            /* 获取视口缩放的比例 */
            var scale = document.documentElement.clientWidth/targetW;
            /* 获取到meta标签 */
            var meta =    document.querySelector("meta[name='viewport']");
            /* 向其添加缩放的比例 */
            meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
    })()

html与css代码:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width"/>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /* 将其宽度设置为设计图大小的一半(设计图大小为640px),将其高度设置为100px */
            #test{
                width: 320px;
                height: 100px;
                background: pink;
                text-align: center;
                font-size: 32px;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="test">test</div>
    </body>

详解如何使用rem或viewport进行移动端适配

详解如何使用rem或viewport进行移动端适配

可以看出此时元素的大小并没有发生改变(因为我们改变的是视口的大小并不是元素的大小)但其仍会占据视口的一半(根据缩放比来去改变元素在当前界面所占据的大小)。这就是viewport进行移动端适配的使用。

viewport适配的原理

viewport适配方案中,每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的,等比的*/

  • viewport适配的优缺点
  • 在我们设计图上所量取的大小即为我们可以设置的像素大小,即所量即所设
  • 缺点破坏完美视口

# 三:结尾

以上为rem适配与viewport适配使用进行的总结,但还是推荐大家使用less+rem进行移动端的适配,更多相关rem或viewport移动端适配内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 #HTML / CSS
AmazeUI导航的示例代码
Aug 14 #HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 #HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 #HTML / CSS
AmazeUI 图标的示例代码
Aug 13 #HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 #HTML / CSS
AmazeUI 网格的实现示例
Aug 13 #HTML / CSS
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
Python迭代和迭代器详解
2016/11/10 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
保护环境建议书400字
2014/05/13 职场文书
汽车转让协议书范本
2014/12/07 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript
JavaScript实现简单的音乐播放器
2022/08/14 Javascript