专栏首页javascript艺术移动端页面的自适应rem

移动端页面的自适应rem

移动端页面rem

写移动端页面最麻烦的是什么,不同分辨率的适配!

一、什么是rem

具体来说,有的屏幕320px宽,有的屏幕640px宽,有的更宽,如果你写固定px,那么要么小的放不下,要么大的有大片空白。

比如320px的10%是32px,640px的10%是64px,

如果10个10%宽度的元素放在一起,那肯定就是100%,即挤满屏幕(宽度),不会超出,也不会留白。

简单理解:

rem 就是指屏幕宽度的百分之x;

或者说,n个rem = 用户可视区域100%宽度

二、rem怎么用?

rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下

emem作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDN

em做弹性布局的缺点还在于牵一发而动全身,一旦某个节点的字体大小发生变化,那么其后代元素都得重新计算

rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小——MDN

rem取值分为两种情况,设置在根元素时和非根元素时,举个例子

/* 作用于根元素,相对于原始大小(16px),所以html的font-size为32px*/html {font-size: 2rem}/* 作用于非根元素,相对于根元素字体大小,所以为64px */p {font-size: 2rem}

三、Rem布局原理

如果子元素设置rem单位的属性,通过更改html元素的字体大小,就可以让子元素实际大小发生变化

html {font-size: 16px}p {width: 2rem} /* 32px*/html {font-size: 32px}p {width: 2rem} /*64px*/

如何让html字体大小一直等于屏幕宽度的百分之一呢? 可以通过js来设置,一般需要在页面dom ready、resize和屏幕旋转中设置

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';

那么如何把UE图中的获取的像素单位的值,转换为已rem为单位的值呢?公式是元素宽度 / UE图宽度 * 100,让我们举个例子,假设UE图尺寸是640px,UE图中的一个元素宽度是100px,根据公式100/640*100 = 15.625

rem是弹性布局的一种实现方式,弹性布局可以算作响应式布局的一种,但响应式布局不是弹性布局,弹性布局强调等比缩放,100%还原;响应式布局强调不同屏幕要有不同的显示,比如媒体查询

一些偏向app类的,图标类的,图片类的,比如淘宝,活动页面,比较适合使用rem,因为调大字体时并不能调大图标的大小

四、Rem布局方案

rem+js方案,同时还要解决noscript问题,解决字体问题,解决屏幕过宽问题

html代码如下

[html] view plain copy

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>rem布局</title>
  7. </head>
  8. <body>
  9. <noscript>开启JavaScript,获得更好的体验</noscript>
  10. <div class="p1">
  11. 宽度为屏幕宽度的50%,字体大小1.2em
  12. <div class="s1">
  13. 字体大小1.2.em
  14. </div>
  15. </div>
  16. <div class="p2">
  17. 宽度为屏幕宽度的40%,字体大小默认
  18. <div class="s2">
  19. 字体大小1.2em
  20. </div>
  21. </div>
  22. </body>
  23. </html>

css代码如下

[html] view plain copy

  1. html {
  2. font-size: 32px; /* 320/10 */
  3. }
  4. body {
  5. font-size: 16px; /* 修正字体大小 */
  6. /* 防止页面过宽 */
  7. margin: auto;
  8. padding: 0;
  9. width: 10rem;
  10. /* 防止页面过宽 */
  11. outline: 1px dashed green;
  12. }
  13. /* js被禁止的回退方案 */
  14. @media screen and (min-width: 320px) {
  15. html {font-size: 32px}
  16. body {font-size: 16px;}
  17. }
  18. @media screen and (min-width: 481px) and (max-width:640px) {
  19. html {font-size: 48px}
  20. body {font-size: 18px;}
  21. }
  22. @media screen and (min-width: 641px) {
  23. html {font-size: 64px}
  24. body {font-size: 20px;}
  25. }
  26. noscript {
  27. display: block;
  28. border: 1px solid #d6e9c6;
  29. padding: 3px 5px;
  30. background: #dff0d8;
  31. color: #3c763d;
  32. }
  33. /* js被禁止的回退方案 */
  34. .p1, .p2 {
  35. border: 1px solid red;
  36. margin: 10px 0;
  37. }
  38. .p1 {
  39. width: 5rem;
  40. height: 5rem;
  41. font-size: 1.2em; /* 字体使用em */
  42. }
  43. .s1 {
  44. font-size: 1.2em; /* 字体使用em */
  45. }
  46. .p2 {
  47. width: 4rem;
  48. height: 4rem;
  49. }
  50. .s2 {
  51. font-size: 1.2em /* 字体使用em */
  52. }

js代码如下

[html] view plain copy

  1. var documentElement = document.documentElement;
  2. function callback() {
  3. var clientWidth = documentElement.clientWidth;
  4. // 屏幕宽度大于780,不在放大
  5. clientWidth = clientWidth < 780 ? clientWidth : 780;
  6. documentElement.style.fontSize = clientWidth / 10 + 'px';
  7. }
  8. document.addEventListener('DOMContentLoaded', callback);
  9. window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

参考博客http://blog.csdn.net/qq_36263601/article/details/78366710

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52),作者:javascript艺术

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端页面自适应解决方案:rem 布局篇

    假设设计妹妹给我们的设计稿尺寸为750 * 1340。结合网易、淘宝移动端首页html元素上的font-size属性,html5设计稿尺寸以及前端与设计之间协作...

    用户1272076
  • 移动端页面使用rem来做适配

    rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位。 假设根元素的字体大小是10px, 则...

    前端GoGoGo
  • Rem在移动端的适配

    越陌度阡
  • 移动端网页布局适配rem方案小结

    意思就是根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网...

    前端知否
  • 简单粗暴的移动端适配方案 - REM

    腾讯NEXT学位
  • 简单粗暴的移动端适配方案 - REM

    手机市场日渐丰富的同时,给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题,...

    IMWeb前端团队
  • 移动端web页面开发的一些问题

    前端涉及到的领域不单单只是PC浏览器了,现在是移动为王的时代,所以大部分的时候还是在做移动端的页面适配。所以这里记录一下在移动端开发的时候遇到的一些问题。

    踏浪
  • 可爱的rem

    嗯,这种的样式的工作量超级大,因为要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过~~~

    嘉明
  • web移动端适配方案实践

    移动端web页面的开发适配一直是前端开发津津乐道的话题,在实际开发过程中,移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因,下文...

    CS逍遥剑仙
  • 细说移动端 经典的REM布局 与 新秀VW布局

    说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等...

    书童小二
  • 布局常用解决方案对比(媒体查询、百分比、rem和vw/vh)

    简要介绍:前端开发中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发,分析了px在移动...

    用户8639654
  • 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样...

    何处锦绣不灰堆
  • –我对移动端适配的了解

    大象无痕
  • web移动端适配方案实践

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    csxiaoyao
  • 08-移动端开发教程-移动端适配方案

    由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。

    老马
  • 08-移动端开发教程-移动端适配方案

    由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

    老马
  • css篇-面试题7-说一说rem与em的区别并如何做移动端适配

    rem 是基于 html 元素的字体大小来决定,而 em 则根据使用它的元素的大小决定,一般被称为相对长度单位,是根据它父元素的字体大小来计算的,一般默认情况下...

    itclanCoder
  • 认识em、rem单位以及cssrem自动换算工具

    设备屏幕有多种不同的分辨率,页面适配方案有如下几种: 1、全适配:响应式布局+流体布局 2、移动端适配:

    Devops海洋的渔夫
  • 单屏页面响应式适配玩法

    把公共的 页头 、页脚、导航栏、边框 放到最顶层,比方说设置层级为 999,其他每个独立页则放在下面,然后切换页面的时候更新独立页的层级以达到效果图的效果(当然...

    胡哥有话说

扫码关注云+社区

领取腾讯云代金券