详解如何使用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的列表toggle特效实例教程
Jan 04 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 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自动更新新闻DIY
2006/10/09 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
护士个人简历自荐信
2013/10/18 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
小学教师师德承诺书
2014/05/23 职场文书
毕业生实习证明
2014/09/19 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
运动会报道稿大全
2015/07/23 职场文书
中学教代会开幕词
2016/03/04 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技