rem简单实现移动端适配
rem：移动web开发
默认字体大小是16px
在
<html>中设置字体大小与em的区别：
- em是在父级设置字体大小受影响
移动端适配
首先获取屏幕的宽度
计算当前屏幕宽度和640的比例
计算出font-size的值
改变html的font-size的值
<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
<meta charset="UTF-8">
<title>rem</title>
<style>
* {
margin: ;
padding: ;
}
div {
width: .4rem;
height: .4rem;
background-color: pink;
font-size: .14rem;
margin: auto;
}
p {
width: %;
height: %;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<p>这是一个p</p>
</div>
</body>
</html>第一种：
window.onresize = function(){
var html = document.getElementsByTagName('html')[];
var width = html.offsetWidth;
console.log(width);
html.style.fontSize = (width>=?:width)/* + 'px';
};第二种：
var html = document.getElementsByTagName('html')[];
if(html){
var w = window.innerWidth;
var fontSize = (w>?:w)/ * ;
html.style.fontSize = fontSize + 'px';
}
window.onload = function(){
window.onresize = function(){
var w = window.innerWidth;
console.log(w);
var fontSize = (w>?:w)/ * ;
html.style.fontSize = fontSize + 'px';
}
}
rem简单实现移动端适配的更多相关文章
- 小tips：使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...
- 移动端适配 后篇（rem+vm）
涉及到的一些名词, 详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 [英寸Inch]英寸表示屏幕斜对角线的长度 [像素Pixel]像素是图像的基本采样单位,它不是一个确定的物理量,因为 ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- Rem实现移动端适配
移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...
- 移动端适配-rem（新）
概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单 ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...
- 移动端适配之REM
随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
- 移动端适配方案（rem+flex）
为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem. 移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080* ...
随机推荐
- java中为什么不允许类多重继承，却允许接口多重继承
首先看下面这一段代码:(底下有热心网友更正,jdk1.8之后情况确实有点变化,等改天有空继续更) interface a{ void b();}interface a1 extends a{ void ...
- day007 列表类型、元祖类型、 字典类型、 集合类型的内置方法
目录 列表数据类型的内置方法 作用 定义方式 优先掌握的方法 需要掌握的方法 元祖类型的内置方法 作用 定义方式 优先掌握的方法(参考列表方法) 字典类型的内置方法 作用 定义方式 优先掌握的方法 需 ...
- BZOJ 3531: [Sdoi2014]旅行 权值线段树 + 树链剖分
Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰 ...
- 【转载】CentOS 安装rz和sz命令 lrzsz
lrzsz在linux里可代替ftp上传和下载.lrzsz 官网入口:http://freecode.com/projects/lrzsz/ lrzsz是一个unix通信套件提供的X,Y,和ZMode ...
- Git 基础教程 之 从远程库克隆
③ 克隆一个本地仓库 a, 在合适的地方,在Git Bash下执行命令: git clone git@github.com:hardy9sap/gittutorial.git
- VIM 使用 匹配替换命令配合表达式 实现 递增替换
:let n=100 | g/while/s/\d/\=n / | let n=n+1 before 10 void *thread_function_1(void *arg) { 11 int i; ...
- zabbix ipmi
http://blog.csdn.net/ygqygq2/article/details/53264993
- android 集成支付宝app支付(原生态)-包括android前端与java后台
本文讲解了 android开发的原生态app集成了支付宝支付, 还提供了java后台服务器处理支付宝支付的加密代码, app前端与java后台服务器使用json数据格式交互信息,java后台服务主要用 ...
- Poj 1321 棋盘问题 【回溯、类N皇后】
id=1321" target="_blank">棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Subm ...
- Android----获得当前应用包名、当前activity的名字、推断是否是系统桌面、service类
1.获得当前应用包名 public static String getRunningActivityName(Context context) { ActivityManager activityMa ...