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:

都适配了。
web移动端rem的适配的更多相关文章
- 移动端rem单位适配使用
1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...
- 移动端rem字体适配JS
// 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户 function adapt(designWidth, rem2px) { // designWidth:'设计图宽度' 1rem==r ...
- Web移动端---iPhone X适配(底部栏黑横线)
一.相信大家有被iPhone X底部黑色横线支配的恐惧 上面我们可以看到,底部的导航栏被一条黑色横线所盖住,那么就很烦.下面我们可以开始进行适配环节 1.首先我们可以用 JS 判断手机环境是不是 iP ...
- 移动端rem移动适配
https://www.cnblogs.com/jingwhale/p/5741567.html
- web移动端适配方案
web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
- 基于REM的移动端响应式适配方案
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
随机推荐
- eclipse 在复制/粘贴 时很卡(转)
最近发现eclipse在按Ctrl+C 时卡的要命,在网上找了一下,发现原来如此: 打开选项: Window -> Preferences -> General -> Editors ...
- Redmine 和GitBlit仓库服务器整合
运行环境: RedMine: 4.0.4 Git 仓库: Gitbilt V1.8.0 必须: Redmine 安装并可运行 Redmine运行的主机里面已经安装了 Git,因需要在命令行中运行 gi ...
- look at me
I would bet my life, like I bet my heart我以生命与真心担保That you were the one, baby你就是我的命中注定I've never been ...
- mongodb常用基本命令
一.数据库常用命令 1.help查看命令提示 help db.help() db.test.help() db.test.find().help() 2.创建.切换数据库 use movies 3.查 ...
- Windows内存管理(1)--分配内核内存 和 使用链表
1. 分配内核内存 Windows驱动程序使用的内存资源非常珍贵,分配内存时要尽量节约.和应用程序一样,局部变量是存放在栈空间中的.但栈空间不会像应用程序那么大,所以驱动程序不适合递归调用或 ...
- 用python写的自动转发邮件信息模板
# -*- coding:utf-8 -*- #加密东西 def decrypt(key, s): c = bytearray(str(s).encode("gbk")) n = ...
- python数据结构之二叉树的统计与转换实例
python数据结构之二叉树的统计与转换实例 这篇文章主要介绍了python数据结构之二叉树的统计与转换实例,例如统计二叉树的叶子.分支节点,以及二叉树的左右两树互换等,需要的朋友可以参考下 一.获取 ...
- jsp-解决自写Servlet老是报错404
写好servlet进行测试老是报404解决方案. 1.确保web.xml配置好 2.Bulid Path项目,在Libraries界面Add External JARs,在tomcat的lib目录下面 ...
- ncurses库的介绍与安装
Frm: http://blog.csdn.net/Mary_Jane/article/details/50769631 介绍 ncurses(new curses)是一套编程库,它提供了一系列的函数 ...
- Java父类强制转换子类原则
最近,微信群友在讨论子类父类的转换问题,其实不难,给大家用实例来说明一下就很明了了. 我们知道Java中子类转换成父类是没有任何问题的,那父类可以转换成子类吗? 来看下面这段程序: public cl ...