详解如何使用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 box-sizing属性
Apr 17 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php pdo操作数据库示例
2017/03/10 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
js实现日历与定时器
2017/02/22 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
在Python中使用模块的教程
2015/04/27 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python中的Django基本命令实例详解
2018/07/15 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
小学社团活动总结
2014/06/27 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
学雷锋日活动总结
2015/02/06 职场文书
银行自荐信范文
2015/03/25 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
React配置子路由的实现
2021/06/03 Javascript
R9700摩机记
2022/04/05 无线电