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


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

    rem介绍

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

    1 html{
    2 font-size: 10px;
    3 }
    4  2rem; /* 2*10 = 20px;*/
    5 margin: 1rem;
    6 }
    7 img{
    8 .6rem;
    9

    rem来做适配

    以前我们往往这样做页面:viewport width 设置为 device-width,然后选我们需要兼容设备的最小宽度(一般是320px)。根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上,页面的字体大小,内容尺寸都是一样的,不同的是,大屏的内容间的空隙比小屏的大。所以这样做的缺点就是,页面在某些尺寸的设备上显示的效果不好。

    如果用rem来页面,我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽,字体越大。然后对原本使用px的地方使用rem来替换。这样,字体大小,内容尺寸,对随着屏幕宽度的变大而变大。

    具体做法

    1 根据不同的设备宽度在根元素上设置不同的字体大小。
    为了能将设计稿中的 px 方便的转换为页面中 rem,我设置 1rem 为 宽度为 640px 的设计稿中的 100px。

    2 做页面时
    将设计稿的宽度缩放至 640px。在上一步中,1rem 为此时设计稿中 100px 的值。屏幕的宽度也就是 (640 / 100) = 6.4rem)

    时刻鼓励自己:

     

           埋头读书,抬头做人!

     

      不登高山不知天之高也,不临深溪不知地之厚也

     

      懦弱的人只会裹足不前,莽撞的人只能引为烧身,只有真正勇敢的人才能所向披靡

     

      我们这个世界,从不会给一个伤心的落伍者颁发奖牌。

     

      海浪的品格,就是无数次被礁石击碎又无数闪地扑向礁石、

     

      鞋底磨穿了,不等于路走到了头。

     

      松驰的琴弦,永远奏不出时代的强音。

     

      躺在被窝里的人,并不感到太阳的温暖。

     

      不安于现状,不甘于平庸,就可能在勇于进取的奋斗中奏响人生壮美的乐间。

     

      不去耕耘,不去播种,再肥的沃土也长不出庄稼,不去奋斗,不去创造,再美的青春也结不出硕果。

      (小小小尾巴/原创)

  • 相关阅读:
    小棒组合项目总结
    小棒组合团队项目第十五周总结
    小棒组合第十四周项目总结
    小棒组合第三周项目总结
    小棒组合第十二周项目总结
    小棒组合团队项目简介
    读 漏屋的<找对英语学习方法的第一本书>
    关于网上商城开发的随笔记录4
    关于网上商城开发的随笔记录3
    关于MVC的开源商城 Nop之闲聊
  • 原文地址:https://www.cnblogs.com/xiaoweiba/p/7532046.html
Copyright © 2020-2023  润新知