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:

    都适配了。

  • 相关阅读:
    神奇的C语言
    实现代码编辑器
    实现了一个简单的key-value存储系统
    一些官网说明
    苹果用户转入mate30,被恶心到了
    吐嘈一下乱用注入
    谈一下OOP的乱用现象
    mongo3.x ssl版安装文件
    再谈LRU双链表内存管理
    cocos在win平台exe无法使用 UserDefault 解决方法
  • 原文地址:https://www.cnblogs.com/1156063074hp/p/10996091.html
Copyright © 2011-2022 走看看