**

需求: 随着移动端设备的变化,内容也跟着变化。
**
先来说说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:

都适配了。

web移动端rem的适配的更多相关文章

  1. 移动端rem单位适配使用

    1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...

  2. 移动端rem字体适配JS

    // 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户 function adapt(designWidth, rem2px) { // designWidth:'设计图宽度' 1rem==r ...

  3. Web移动端---iPhone X适配(底部栏黑横线)

    一.相信大家有被iPhone X底部黑色横线支配的恐惧 上面我们可以看到,底部的导航栏被一条黑色横线所盖住,那么就很烦.下面我们可以开始进行适配环节 1.首先我们可以用 JS 判断手机环境是不是 iP ...

  4. 移动端rem移动适配

    https://www.cnblogs.com/jingwhale/p/5741567.html

  5. web移动端适配方案

    web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...

  6. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  7. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  8. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  9. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

随机推荐

  1. D3.js 动画 过渡效果 (V3版本)

    一 . 过渡的启动   启动过渡效果,与以下四个方法相关:   d3.transition([selection],[name]) //创建一个过渡对象.但是由于每个选择集中都有transition( ...

  2. style优先级

    不同级别 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择器 浏览器自定义或继承       ...

  3. cross compile 交叉编译 ffmpeg

    ffmpeg 支持各种压缩格式的视频解码库,经常出现在各种播放器中,交叉编译也是一项麻烦的事情. 1. 下载ffmpeg 源码包   http://ffmpeg.org/releases/ffmpeg ...

  4. mysql-5.5.17-win64 安装方法

    双击mysql-5.5.17-win64.msi,即开始安装,出现如下界面 2 点击next,出现如下界面,默认为Typical,改选为Custom,单击Next 3 选择MySQL Server后, ...

  5. Mac电脑最常见的办公软件是什么?Notion for Mac多功能办公笔记软件使用方法

    Notion for Mac是一款最新的高效率.办公类软件,相信许多用户在办公的时候需要打开特别多的在线工具,譬如Google Drive.Dropbox Paper.Confluence.GitHu ...

  6. css属性大全(基础篇)

      什么是CSS? CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS.在 ...

  7. string反向找位置,分割字符串(只取文件夹路径)

    1 #include <uf.h> 2 #include <uf_part.h> 3 #include <atlstr.h> 4 #include <iost ...

  8. 在桌面上显示IE图标(非快捷键)

    1.在桌面点击右键选择"属性"打开"显示属性",选择"桌面">"自定义桌面">"常规"& ...

  9. TCP/IP点滴

    1 子网的划分 2 子网的表述 ipv4 IPv4中规定IP地址长度为32,最大地址个数为2^32,点分十进制表示方法:122.70.156.25. ipv6 地址的长度为128,即最大地址个数为2^ ...

  10. HDU1501-Zipper-字符串的dfs

    Given three strings, you are to determine whether the third string can be formed by combining the ch ...