详解如何使用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实现背景模糊的三种方式
Mar 09 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 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实现异步操作的研究
2013/02/03 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python 下划线的不同用法
2020/10/24 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
自我评价200字分享
2013/12/17 职场文书
农村婚礼证婚词
2014/01/10 职场文书
阳光体育活动方案
2014/02/16 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
python语言中pandas字符串分割str.split()函数
2022/08/05 Python