移动端的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 ...
随机推荐
- [No0000E8]C# 方法 参数传递
参数传递 当调用带有参数的方法时,您需要向方法传递参数.在 C# 中,有三种向方法传递参数的方式: 方式 描述 值参数 这种方式复制参数的实际值给函数的形式参数,实参和形参使用的是两个不同内存中的值. ...
- CountDownLatch简单使用
CountDownLatch介绍 CountDownLatch是JAVA提供在java.util.concurrent包下的一个辅助类,可以把它看成是一个计数器,其内部维护着一个count计数,只不过 ...
- HTML5：表单提交
不加CSS.JavaScrips的HTML表单提交简单代码 <!DOCTYPE html> <html lang="en"> <head> &l ...
- iOS知识点持续更新。。。
1.自动布局拉伸和压缩优先级 Autolayout中每个约束都有一个优先级,优先级的范围是1~1000.创建一个约束,默认的优先级最高是1000. Content Hugging Priority:该 ...
- 内存proc详解
Linux系统上的/proc目录是一种文件系统,即proc文件系统.与其它常见的文件系统不同的是,/proc是一种伪文件系统(也即虚拟文件系统),存储的是当前内核运行状态的一系列特殊文件,用户可以通过 ...
- 无法跨越程序集边界使用程序集“DataCheck, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”中的类型“List<ILayer>”，因为该类型有一个为嵌入互操作类型的泛型类型参数
主窗体: FrmDataInspect f2 = new FrmDataInspect(listMapControl1Lyr); f2.Show(); 弹出的窗体: 应该改为: gListMapLyr ...
- 美团点评基于 Flink 的实时数仓建设实践
https://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651749037&idx=1&sn=4a448647b3dae5 ...
- iptables及其在路由器上的应用 (待完善)
1. iptables基本定义 Table (表名) Explanation (注释) nat nat表的主要用处是网络地址转换,即Network Address Translation,缩写为NAT ...
- java 之程序中的http请求
背景 java程序中有时需要我们发起http级别的请求,例如抓数据或者第三方对接时,一般分为两种:一种是只需我们发起请求,还有一种是我们不但要发起请求,还要拿到请求后的数据来进行下一步处理 实现 针对 ...
- git 用远程覆盖本地
git fetch --all git reset --hard origin/master