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* ...
随机推荐
- Git 从github克隆文件至本地
学习阶段,同一个项目,如何保障家与公司的代码同步的问题,可以使用git克隆来解决 在家将项目提交到了GitHub上,现在来到公司,需要将GitHub上的项目克隆到本地,那么对于公司的电脑来说,同样需要 ...
- 【转】虚拟化（三）：vsphere套件的安装注意及使用
vsphere套件里面主要的组件有esxi.vcenter server .vsphere client和vsphere web client. vcenter做为vsphere套件的核心管理成员之一 ...
- DATEADD()
定义和用法 DATEADD() 函数在日期中添加或减去指定的时间间隔. 语法 DATEADD(datepart,number,date) date 参数是合法的日期表达式.number 是您希望添加的 ...
- 本地远程访问服务器jupyter
一.前提: 安装Python3 安装Anaconda 配置jupyter notebook 并启动(重点) 二.配置jupyter文件 因为服务器已经安装好anaconda和jupyter,pytho ...
- Clocksource tsc unstable
内核在启动过程中会根据既定的优先级选择时钟源.优先级的排序根据时钟的精度与访问速度. 其中CPU中的TSC寄存器是精度最高(与CPU最高主频等同),访问速度最快(只需一条指令,一个时钟周期)的时钟源, ...
- android apk的签名和权限问题
一. android apk的签名问题(http://blog.csdn.net/lyq8479/article/details/6401093) 1.为什么要给Android应用程序签名? ...
- MySQL中的注释符号的使用
前言 在学习MySQL的过程中,因为目前接触的语法简单,所以实在没有想到过加入注释.在写博客使用Markdown时,突然想用注释语句,所以便百度了一下,引用了这一篇转载博客. MySQL中的注释符号有 ...
- 11. IDEA 在同一工作空间创建多个项目
1.创建项目 二..创建工作空间 JavaWorkspace 1.File-> New Project -> 创建工作空间 JavaWorkspace,并 顺便创建项目 JavaOne 2 ...
- 学习EXTJS6（4）基本功能-信息提示框组件
1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...
- Spring学习总结（2）——Spring的常用注解
本文汇总了Spring的常用注解,以方便大家查询和使用,具体如下: 使用注解之前要开启自动扫描功能 其中base-package为需要扫描的包(含子包). ? 1 <context:compon ...