移动端rem布局的学习(基于一个网易云播放页面的思考)

对于一个前端的初学者来说,首先要做好的事就是切页面了,切页面不得不说的就是布局了,布局的重要性不言而喻,为了良好的用户体验,提出了许多不一样的布局:响应式布局,弹性布局,流动布局等等,也流入出了许多的框架。最近在看关于移动端的响应式布局,其中涉及到比较多的就是大小属性的设置:px、vw、vh、%、em、rem等等,今天自己就捋一捋rem的用法。

说在前面

一想到写移动端的页面,就要考虑自己写的页面能够适应各种不同的移动设备,起初想想要做到感觉好难啊,最初想到的就是用第三方的框架,用别人写的东西应该会很方便。然而万一不能用该怎么办啊,所以还是要学会自己写原生的页面布局,也就会有今天的这篇文章了。先看看自己用普通百分比、像素来写的页面和后来改用rem写的页面的对比:

普通百分百布局与rem布局的比较

  1. 小分辨率(375*667)
     
  2. 小分辨率(414*736)
  3. 大分辨率

简单的对比下就看出了效果。当不用别人的框架,该怎么去写。最容易想到的就是用百分比来写,这种写法对设备的宽度有用,宽度是固定的,对高度不起什么作用,大部分人的做法就是宽度用百分来设置,高度用px来设置,但这种的做法体验并不是很好,用分辨率小的设备感觉不是很差,一旦换成了分辨率比较大的设备效果就差很多了,大部分的标签元素都会被拉伸。高度固定,换成了大的分辨率各种元素效果还是原来的,各种元素固定了大小,体验并不是很好。

rem的使用

rem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位,通过根元素进行适配的。

  • 普通使用

大部分是通过设置html的字体大小就可以控制rem的大小,例如:html的字体大小为20px,那么就说20px为1rem,接下来的所有元素的大小都基于这个比例来换算。这种的算法是存在问题的,当我们计算页面的宽度rem值得时候都是使用某一款移动设备的分辨率来计算的,下面的例子我用的是iphone6的分辨率375*667,它的宽度为375px,20px为1rem,那么375px就是18.75rem。看下面的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <!--<script type="text/javascript" src="js/rem.js" ></script>-->
        <title></title>
        <style>
            html{
                font-size:20px;
            }
            *{
                border: 0;
                padding: 0;
                margin: 0;
            }
            #box1{
                width: 18.75rem;
                height: 7.5rem;
                float: left;
                background-color: red;

            }
            #box2{
                width: 18.75rem;
                height: 7.5rem;
                float: left;
                background-color: #00FFFF;
                font-size: 0.6rem;
            }
            #box3{
                width: 18.75rem;
                height: 17rem;
                float: left;
                background-color: #B22222;
            }
            #box4{
                width: 18.75rem;
                height: 20rem;
                float: left;
                background-color: #BFBFBF;
            }
            #box5{
                width: 18.75rem;
                height: 22rem;
                float: left;
                background-color: cadetblue;
            }
            #input1{
                width: 80%;
                height: 2rem;
                float: left;
                border-radius: 2rem;
                margin-left: 1.5rem;
                margin-top: 0.6rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <input type="text" id="input1" />
        </div>
        <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
        <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
        <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
        <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
    </body>
</html>

上面的代码在375*667的分辨率下刚好能够占满宽度,当你切换到其他的分辨率(如414*736)时问题就来了,看图:

这个问题的原因很简单,这种写法即使用的是rem也起不来作用,宽度和高度都是固定的,width为18.75rem就是375px,切换成其它分辨率(如414*736),它的宽度还是375px,空白处还是显示出来了,很多人会认为可以把宽度设置成百分比的形式,或者用媒介查询@media,或是viewport设置中的那个deviceWidth()的方式来解决问题,当然这些方式均能解决宽度的问题,然而高度的问题又该怎么办呢?看下面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
        <!--<script type="text/javascript" src="js/rem.js" ></script>-->
        <title></title>
        <style>
            html{
                font-size:20px;
            }
            *{
                border: 0;
                padding: 0;
                margin: 0;
            }
            #box1{
                width: 100%;
                height: 7.5rem;
                float: left;
                background-color: red;

            }
            #box2{
                width: 100%;
                height: 7.5rem;
                float: left;
                background-color: #00FFFF;
                font-size: 0.6rem;
            }
            #box3{
                width: 100%;
                height: 17rem;
                float: left;
                background-color: #B22222;
            }
            #box4{
                width: 100%;
                height: 20rem;
                float: left;
                background-color: #BFBFBF;
            }
            #box5{
                width: 100%;
                height: 22rem;
                float: left;
                background-color: cadetblue;
            }
            #input1{
                width: 80%;
                height: 2rem;
                float: left;
                border-radius: 2rem;
                margin-left: 1.5rem;
                margin-top: 0.6rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <input type="text" id="input1" />
        </div>
        <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
        <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
        <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
        <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
    </body>
</html>

看效果:

 

看图就知道了,宽度可以适应不同的移动设备,然而高度一直都没有发生变化,一直都是150px,页面效果并不好看,分辨率大了,页面被拉伸,高度显得变小了。

  • 正确使用

动态计算html的font-size,核心是切换不同移动设备通过js获取设备宽度,然后按比例计算html的font-size的值,动态变化。

var d = document.documentElement;//获取html元素
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + ‘px‘ : (20 * (cw / 375)) + ‘px‘;

上述代码解释:

  1. 设计稿横向分辨率为375(iphone6),计划20px为1rem;
  2. 布局的时候,各元素的css尺寸= 20 * (设备宽度/设计稿竖向分辨率)。

完整代码:

window.addEventListener((‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘),
                        (function() {//判断是屏幕旋转还是resize
    function c() {
        var d = document.documentElement;//获取html元素
        var cw = d.clientWidth || 750;
        d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + ‘px‘ : (20 * (cw / 375)) + ‘px‘;
    }
    c();
    return c;
})(), false);

上面的做法就可以动态的设置各种标签元素的宽和高,按比例的调试适应不同的移动设备。例如下: 上面的代码中是以iphone6为设计稿的,box1的height为7.5rem(150px),如果切换成iphone6 plus的大小,box1的height=(414/375)7.5=8.28rem,也就是8.2820=165.6px,与iphone6时的高度是不一样的,写页面时会更加的美观。看效果:

 

看上面显示的效果就可以看出来,和计算出的结果是一样的,方法正确。以后可以用了。看看整体效果:

 

页面元素完全没有被拉伸的效果,按照一定的比例缩放,保持页面效果美观。

原文地址:https://www.cnblogs.com/wangxiaoduan/p/8466027.html

时间: 2024-10-11 00:43:58

移动端rem布局的学习(基于一个网易云播放页面的思考)的相关文章

第130天:移动端-rem布局

一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用. 网易云的方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的font-size大小. 淘宝的方案总结为:根据设备设备像素比设置scale的值,保

移动端Rem布局注意事项

1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是section必须转化为弹性盒子,(因为元素在弹性盒子里面可以在一行排列), 哪一个需要固定宽度就给他设置固定宽度,另外一个只需设置flex=1即可: 此外还需解决高度塌陷问题,将他们俩都设置 “overflow=auto //一定是auto//不能是hidden或者其他.”  (b):常规一栏的布局,只需按部

一看就懂得移动端rem布局、rem如何换算

这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有欠缺的地方,大神们可以指出错误或者改进. function intiSize(){ //获取当前浏览器窗口宽度(这里的实质就是body宽度) var win_w=document.body.offsetWidth; //定义变量 var fontSize; if(win_w>640){ fontSi

移动端rem布局和百分比栅格化布局

移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口宽度,p(比例尺)= 视口宽度/效果图宽度 根元素font-size=100px*p 然后来个resize去跟随浏览器大小变化 1(function (win){ 7 var doc = win.document, 8 html = doc.documentElement, 9 option = h

移动端rem布局背景图片使用以及sprite雪碧图

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片. rem布局 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem; height: 2rem; } 那么最终

移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可 点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置 对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转

关于移动端rem布局

之前做web app开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图.基础字体大小.图标宽高. 解决方案的简单介绍: 基于rem 解决方案的简单介绍: 基于rem 给根节点设置一个基础值,然后页面的所有元素布局均相对于该font-size值采用单位设定.那么基础的font-s

移动端rem布局实现(vw)

什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 1rem=16px ,10rem=160px . rem的布局原理:1.通过JS (JavaScript)2.通过vw这里我们通过vw进行实现vw指的是view width 它是相对单位表示把屏幕自动分成了100vw宽,假设屏幕是375px对应 100vw那么1vw就等于3.75px.以iphon

关于移动端rem 布局的一些总结

1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,如不同html字体大小的计算下,rem值不同 第一个例子: html{font-size:10px;} a{width:1rem;height:1rem} 10px = 1rem * 10px 第二