移动端的rem适配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{
width:100%;
height:1rem;
background: red;
}
li{
width:1rem;
height:1rem;
font-size:0.2rem;
color:blue;
float:left;
}
</style>
</head>
<body>
<ul>
<li>小桥</li>
<li>流水</li>
<li>人家</li>
</ul>
</body>
<script type="text/javascript">
// 移动端适配
function rems(){
// 获取屏幕宽度(此处是一个兼容的写法)
var htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
// 设置根元素的fontSize的大小，此处的3.2是--设计图的宽度/100
document.documentElement.style.fontSize=htmlWidth/3.2+"px";
// 设置条件屏幕宽度最大值
if(htmlWidth>640){
htmlWidth=640;
document.documentElement.style.fontSize=htmlWidth/3.2+"px";
}
}
// 默认调用适配函数
rems();
// window大小变化时调用适配函数
window.onresize=function(){
rems()
}
</script>
</html>
移动端的rem适配的更多相关文章
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
- 前端移动端的rem适配计算原理
rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...
- Vue-cli4.xPC端项目Rem适配
适配准备 安装 (amfe-flexible) 和(postcss-px2rem) 1, 安装依赖并在main.js中引入该依赖 npm i amfe-flexible import "am ...
- 移动端rem适配屏幕
九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...
- 自动改变html font-size，实现移动端rem适配
移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
- 基于REM的移动端响应式适配方案
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- H5移动端rem适配
/** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...
随机推荐
- CH 1601 - 前缀统计 - [字典树模板题]
题目链接:传送门 描述给定 $N$ 个字符串 $S_1,S_2,\cdots,S_N$,接下来进行 $M$ 次询问,每次询问给定一个字符串 $T$,求 $S_1 \sim S_N$ 中有多少个字符串是 ...
- [No000013C]B树、B-树、B+树、B*树
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
- [No0000138]软件开发基础知识
1. 本文目的 本文目的在于,介绍软件开发的各种基础知识 以实现,看了之后,对于软件开发的很多领域的基础知识有所了解 如此在进行后续的真正的软件开发时,遇到各种细节知识,才会明白由来和背景知识 第 1 ...
- Hystrix在项目中实践
Hystrix在项目中实践 https://mp.weixin.qq.com/s/4Fg0COnWRB3rRWfxbJt7gA
- Apache Common Math Stat
http://commons.apache.org/proper/commons-math/userguide/stat.html mark DescriptiveStatistics maint ...
- 2018/05/02 PHP 之错误与异常处理
在学习中,越学习越觉得自己基础薄弱. 在平常工作中,对于某些错误处理感觉不知道怎么下手,于是决定重新再整理一下. 强烈推荐这篇文章,真的感觉学习到了很多. 部分引用::再谈PHP错误与异常处理 -- ...
- es中对mapping的理解
(1)往es里面直接插入数据,es会自动建立索引,同时建立type以及对应的mapping (2)mapping中就自动定义了每个field的数据类型 (3)不同的数据类型(比如说text和date) ...
- 【SQL】SQL存储过程相关当前理解。（@temp=……）
1.下图左侧红框中的是SQL的存储过程,是程序同SQL之间互相调用的函数.——这里先作为了解不做深入研究. 比如客户通过ATM提款机取200元钱,程序中提交取200元钱操作,后续可能会进入SQL进行一 ...
- mysql报错Multi-statement transaction required more than 'max_binlog_cache_size' bytes of storage
mysql报错Multi-statement transaction required more than 'max_binlog_cache_size' bytes of storage 在执行cr ...
- 自动化工具之三：pywinauto
Python自动化工具:pywinauto 一.pywinauto的安装 (1)安装命令 pip install -U pywinauto/pip3 install -U pywinauto (2)验 ...