移动端Rem之讲解总结

日妈常说的H5页面,为啥叫H5页面嘛,不就是手机上展示的页面吗?那是因为啊手机兼容所有html5新特性,所以跑在手机上的页面也叫h5页面,跨平台(安装ios),基于webview,它就是终端开发的一个组件,简单理解就是一个浏览器,放入url就可以访问地址,而webview基本上都是基于webket的内核,所以只需要兼容webket就行了,省了其他内核如IE,moz ,o等等

 

一般移动端响应式布局(flex+媒体查询器基本上就够用了

 

 

 

1rem=16px(移动端默认的)根据这个去换算单位,这个可以改变的嘛,改变html 根元素的font-size就行了啊,font-size是继承的嘛,所以改变源头,那1rem也就跟着改变了嘛

有两种方法来改变html 的font-size 的值

一种就是写媒体查询器,这种太垃圾了,妈的安卓纳闷多机型,你去给劳资写

二种就是通过js动态设置html的font-size

代码如下:

document.body指的是html节点中的body节点
document.documentElement值得是根节点,即html节点。
document.documentElement.clientWidth获取根节点html的宽度不能乱写写成document.html.clientWidth这是错误的哈
document.body.clientWidth获取body节点的宽度
为啥要这两个呢
因为兼容问题啊有时候拿不到根节点的宽度就会拿body来顶替

 

这里为啥要除以10呢?
因为1rem=html的font-size,除以10那是为了方便计算,当然不能太离谱除以200,
苹果6 7 8 视窗的宽度是375px,以它为例子,除以10html的font-size就是37.5px即 1rem=37.5px;如果设计图某一个高度是150px 则高度写成4rem就行了啊,150/37.5=4rem 搞定
但是不可能每次都去除啊,所以这里rem要和scss结合在一起使用就很good了,用scss里面写一个函数就搞定了
这里就要学习一下scss了
一般都是以iphone6为基准设计稿,里面的标注除以2 才是你代码里面的实际值

转载于:https://www.cnblogs.com/myfirstboke/p/11123554.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/386525.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

终于有人把安卓程序员必学知识点全整理出来了,送大厂面经一份!

除了Bug,最让你头疼的问题是什么?单身?秃头?996?面试造火箭,工作拧螺丝? 作为安卓开发者,除了Bug,经常会碰到下面这些问题: 应用卡顿,丢帧,屏幕画…

ABA问题

CAS:对于内存中的某一个值V,提供一个旧值A和一个新值B。如果提供的旧值V和A相等就把B写入V。这个过程是原子性的。 CAS执行结果要么成功要么失败,对于失败的情形下一班采用不断重试。或者放弃。 ABA:如果另一个线程修改V值假设原…

mq引入以后的缺点

系统可用性降低? 一旦mq不能使用以后,系统A不能发送消息到mq,系统BCD无法从mq中获取到消息.整个系统就崩溃了. 如何解决: 系统复杂程度增加? 加入mq以后,mq引入来的问题很多,然后导致系统的复杂程度增加. 如何解决 系统的一致性降低? 有人给系统A发送了一个请求,本来这个请求…

网易云的朋友给我这份339页的Android面经,成功入职阿里

IT行业的前景 近几年来,大数据、人工智能AI、物联网等一些技术不断发展,也让人们看到了IT行业的繁荣与良好的前景。越来越多的高校学府加大了对计算机的投入,设立相应的热门专业来吸引招生。当然也有越来越多的人选择从事这个行业&#xff0…

AQS相关逻辑解析

关心QPS TPS 如何让线程停留在lock 1、竞争锁-(拿到锁的线程、没拿到锁的线程) 临界区的资源(static redis 数据库变量 配置中心config zookeeper)大家共享都可以获得的资源 临界区没拿到锁的未拿到锁线程进行停留 2、怎么让线程停留在Lock方法里 …

git介绍和常用操作

转载于:https://www.cnblogs.com/kesz/p/11124423.html

网易云的朋友给我这份339页的Android面经,满满干货指导

想要成为一名优秀的Android开发,你需要一份完备的知识体系,在这里,让我们一起成长为自己所想的那样~。 25%的面试官会在头5分钟内决定面试的结果60%的面试官会在头15分钟内决定面试的结果 一般来说,一场单面的时间在30分钟左右&…

synchronized 和Lock区别

synchronized实现原理 Java中每一个对象都可以作为锁,这是synchronized实现同步的基础: 普通同步方法,锁是当前实例对象静态同步方法,锁是当前类的class对象同步方法块,锁是括号里面的对象 当一个线程访问同步代码块…

美团安卓面试,难道Android真的凉了?快来收藏!

我所接触的Android开发者,百分之九十五以上 都遇到了以下几点致命弱点! 如果这些问题也是阻止你升职加薪,跳槽大厂的阻碍。 那么我确信可以帮你突破瓶颈! 1.开发者的门越来越高: 小厂的机会少了,大厂…

django -- 实现ORM登录

前戏 上篇文章写了一个简单的登录页面,那我们可不可以实现一个简单的登录功能呢?如果登录成功,给返回一个页面,失败给出错误的提示呢? 在之前学HTML的时候,我们知道,网页在往服务器提交数据的时…

美团点评APP在移动网络性能优化的实践,通用流行框架大全

" 对于程序员来说,如果哪一天开始他停止了学习,那么他的职业生涯便开始宣告消亡。” 高薪的IT行业是众多年轻人的职业梦想,然而,一旦身入其中却发觉没有想像中那么美好。被称为IT蓝领的编程员,工作强度大&#xf…

java 8大happen-before原则超全面详解

再来重复下八大原则: 单线程happen-before原则:在同一个线程中,书写在前面的操作happen-before后面的操作。锁的happen-before原则:同一个锁的unlock操作happen-before此锁的lock操作。volatile的happen-before原则:对…

centos7.0利用yum快速安装mysql8.0

我这里直接使用MySQL Yum存储库的方式快速安装: 抽象 MySQL Yum存储库提供用于在Linux平台上安装MySQL服务器,客户端和其他组件的RPM包。这些软件包还可以升级和替换从Linux发行版本机软件存储库安装的任何第三方MySQL软件包,如果可以从MySQL…

腾讯3轮面试都问了Android事件分发,论程序员成长的正确姿势

前言 这些题目是网友去美团等一线互联网公司面试被问到的题目。笔者从自身面试经历、各大网络社交技术平台搜集整理而成,熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。 主要分为以下几部分: (1)Android面试题 …

happens-before规则和as-if-serial语义

概述 本文大部分整理自《Java并发编程的艺术》,温故而知新,加深对基础的理解程度。 指令序列的重排序 我们在编写代码的时候,通常自上而下编写,那么希望执行的顺序,理论上也是逐步串行执行,但是为了提高…

安装nodejs

1.安装nodejs:node-v8.12.0-x64.msi; 2.检测是否安装成功: 3.地址栏打开命令行:输入 cmd回车 4.检测node是否安装成功:node -v 看到版本号就是安装成功了 5.检测npm是否成功:npm -v 是安装成功了 6、如果npm成功了,把 package.js…

贴片晶振无源石英谐振器直插晶振

贴片晶振 贴片晶振3.579M~25MHz无源石英谐振器直插晶振 文章目录 贴片晶振前言一、贴片晶振3.579M~25MHz无源石英谐振器直插晶振二、属性三、技术参数总结前言 贴片晶振(Surface Mount Crystal Oscillator)是一种采用表面贴装技术进行安装的晶振。它的主要特点是封装小巧、安…

这些新技术你们都知道吗?成功收获美团,小米安卓offer

前言 近期被两则消息刷屏,【字节跳动持续大规模招聘,全年校招超过1万人】【腾讯有史以来最大规模的校招启动】当然Android岗位也包含在内,因此Android还是有很多机会的。结合往期面试的同学(主要是校招)经验&#xff…

CompareAndSwap原子操作原理

在翻阅AQS(AbstractQueuedSynchronizer)类的过程中,发现其进行原子操作的时候采用的是CAS。涉及的代码如下: 1: private static final Unsafe unsafe Unsafe.getUnsafe(); 2: private static final long stateOffset; 3: private static f…

STemWin移植笔记

实现将STemWin图形库移植到STM32F103ZET中,记录简单的操作步骤,以便自己后续查阅。 1/ 从官网获取STemWin库的压缩包en.stemwin.zip。 2/ 解压后,在路径STemWin_Library_V1.2.0\Libraries\STemWinLibrary532下可以找到库文件。 3/ 移植前的准…