移动APP中rem适配

将js中的代码引入自己html页面中,页面内的所有有关尺寸大小的设定都可以用rem来代替,如用rem代替px的使用,可以做到屏幕大内容按比例放大,是所有内容哦,若果你项目中所有内容都使用rem。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>移动APP中rem适配-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
div {
font-size:0.3rem;
text-align:center;
padding-top:1rem;
}
</style>
</head>
<body>
<div>Hello World!</div><script>
remFn(10);
window.onresize = function() {
remFn(10);
}

function remFn(num) {
document.documentElement.style.fontSize = document.documentElement.clientWidth / num + ‘px‘;
};</script>
</body>
</html>

时间: 2024-08-16 01:34:20

移动APP中rem适配的相关文章

em与rem之间的区别以及移动设备中的rem适配方案

em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE html> <html lang="en" style="font-size: 50px"> <head> <meta charset="UTF-8"> <title>Document</tit

移动端最强适配(rem适配之px2rem)&amp;&amp; 移动端结合Vuex实现简单loading加载效果

一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦: 进入正题: 首先 px2rem 也是基于 rem  适配的,但是他的好用之处在于灵活.简便.高效不用我们自己去换算.px2rem-load

总结XX网app中webapp常见的前端错误。

在2016年12月至2017年1月,这一个月的时间内,我参与了易政网app中webapp前端项目的工作,下面将我在此次项目中犯的错误总结起来,以防下次再犯. 注意点 一:复用 可复用的地方一定要复用,不然后期改样式会累死... 二:防止类名冲突 在写类名的时候最好加个前缀,不然在后期可能会有css文件合并,到时候有类名冲突就尴尬了... 三:外链导入 js和css文件最好用外链式导入,如果直接放在html中不好查看,(如果其中有的样式没有用到,jsp会报错). 四:跟标准 项目标准一定要统一好,

【Android】透明状态栏在App中的实现与接口设计

By Sodino 文章目录 1. 认识透明状态栏 2. 透明状态栏Api及特性 3. 设置透明状态栏 4. 处理消失的系统状态栏区域 5. fitsSystemWindows 6. Activity中的接口设计 7. Fragment中的接口设计 8. 白色Titlebar的处理 9. 小米 与 魅族 与 (莫名其妙的)华为 10. 腾讯优测UTest GitHub源码:TransparentStatusbar源码中分两个app TestBasic: 透明状态栏实现的示例,方便debug 白色

移动端使用rem适配及相关问题

移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案很受欢迎. rem定义及浏览器支持情况 rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其

android app内部更新适配到8.0

app 内部跟新是app中必须要有的功能,在app出现改变时,app内部更新能以最快的速度将应用提升到最新版本. 步骤: 1.获取本地app的版本号 int versionCode = 0; try { // 获取软件版本号, versionCode = this.getPackageManager().getPackageInfo( getPackageName(), 0).versionCode; } catch (NameNotFoundException e) { e.printStac

如何在嵌套的app中运用vue去写单页面H5

本文主要介绍移动端.为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用,尽量用最基础的语法. 可用惯了各种ES6语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心各种烦躁.这里介绍一下,如何在H5中运vue 去写,嵌套到用到app中. 首先引入vue CDN ,记得去扒一个vue.js. 下载下来,不要用htpp,这样可以避免有些模块因为网卡导致,页面加载错乱. <script src="./js/vue.min.js"></sc

0082 rem适配方案:less+rem+媒体查询、flexible.js+rem

1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备. 2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配. 技术方案: 1.less+rem+媒体查询 2.flexible.js+rem 总结: 两种方案现在都存在,方案2 更简单,现阶段无需了解里面的js代码. rem实际开发适配方案1 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份(划分标准

自己动手去除app中谷歌广告

最近想去研究一下去除app中的谷歌广告,由于换了手机,且使用安卓6.0系统,暂时不能root安装辅助软件. 前言: 查看了很多网络文章,一般都是两种方法:把显示广告大小的参数改为0,或是修改广告访问的连接为无效连接,前一种比较通用且简单,后一种比较费功夫,但是更节省流量和系统资源 ,然后发现网络上的文章大多是转载的,且转载文章的人没有检测实际效果和实验环境,没有备注实验时间,这样很多转载的文章只是提供一个思路,但已经达不到效果了,所以只好重新研究一下,因为我没有系统学习java语言,只能看到什么