zoukankan      html  css  js  c++  java
  • web移动端rem的适配

    **

    需求: 随着移动端设备的变化,内容也跟着变化。
    **
    先来说说rem单位,以rem为单位,其大小是根据根元素(html标签)的字体大小来判断的,
          如 html的font-size:100px; 子元素div 的width:2em; 等同于width:200px;(100 * 2),
    这就来思路了: 先以一个固定适配的html的font-size来把页面完成,后再根据适配的宽度来动态的设置其html的font-size,以达到我们的需求,可能有点绕,我们来看看代码会更容易理解些。

    我以375px(iphone678)设备来进行开发页面,我设html的font-size:100px(也就是说1em = 100px),

    想设置100%的宽和90px的高 用rem来设置,使该footer随着适配的变化也跟着变化(有人就会说了,直接把宽设置成100%不是更好吗,是的 会更好,但我这里只是拿来做例子来讲解rem而已。)

     

    开看效果:

    这个大家都懂是不,接下来正题来了

    想换成别的设备,这footer宽高跟着设备进行变化,怎么做呢? 对 就是 我们上所说的思路:根据适配的宽度来动态的设置其html的font-size,请看下面js代码:

    这样就可以随设备的变化而变化了。

    看看效果:
    iphone5:

    iPad:

    都适配了。

  • 相关阅读:
    单独设置css的class属性
    理解闭包的使用方法
    npm常用命令和总结
    前端调试之服务器
    gulp 报错的处理——个人经验
    工作经验备忘
    c++:虚函数和纯虚函数(转载)
    snmp学习、配置
    sigar学习
    linux安装VSCode
  • 原文地址:https://www.cnblogs.com/1156063074hp/p/10996091.html
Copyright © 2011-2022 走看看