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* ...
随机推荐
- 国密SSL证书申请免费试用
沃通提供国密SSL证书免费申请试用服务,一次申请可同时签发SM2/RSA双算法证书,试用周期1个月,用于测试国密SM2 SSL证书的运行效果和SM2/RSA双证书部署效果. 试用产品:SM2/RSA双 ...
- eas之编辑表单元格
--指定表列行单元不可编辑 // 锁定表格.行.列.单元 table.getStyleAttributes().getProtection().setLocked(true); row.getStyl ...
- 15.5.2 【Task实现细节】骨架方法的结构
尽管骨架方法中的代码非常简单,但它暗示了状态机的职责.代码清单15-11生成的骨架方 法如下所示: [DebuggerStepThrough] [AsyncStateMachine(typeof(De ...
- HTTP 返回码中 301 与 302 的区别
转自:http://blog.csdn.net/qmhball/article/details/7838989 一．官方说法301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之 ...
- vue: This relative module was not found
这是今天运行vue项目报的一个错误,特地在此记录一下. 错误信息如下: ERROR Failed to compile with 1 errors This relative module was n ...
- 洛谷P1579 哥德巴赫猜想（升级版）【水题+素数】
1742年6月7日哥德巴赫写信给当时的大数学家欧拉,正式提出了以下的猜想:任何一个大于9的奇数都可以表示成3个质数之和.质数是指除了1和本身之外没有其他约数的数,如2和11都是质数,而6不是质数,因为 ...
- Java中==和equals()的区别
- QT的creator中图示
不同的开发工具显示class和相关的用不同的图标表示.但大同小异.但对于QT的creator中图示确实不太好分.看图一目了然.
- Oleg and Little Ponies
Oleg and Little Ponies Time limit: 0.9 secondMemory limit: 64 MB Little boy Oleg loves the cartoon M ...
- IntelliJ IDEA测试学习网站
IntelliJ IDEA测试学习网站 http://idea.lanyus.com/ 嗯,请支持正版: