移动端的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 ...
随机推荐
- php 之数组
PHP之array数组 PHP中的数组实际上是一个有序映射.映射是一种把values关联到keys的类型.此类型在很多方面做了优化, 因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种实 ...
- ubuntu物理机上搭建Kubernetes集群 -- master 配置
1. 将 kube-apiserver, kube-controller-manager, kube-scheduler,kubectl 拷贝到/usr/bin目录下 2. 安装etcd sudo ...
- 抽屉之Tornado实战（9）--装饰器实现用户登录状态验证
当然今天讲的验证,不只Tornado会用,以后用到web框架都会用到,最常见的场景就是只有用户登陆了才能执行某些操作,所以在执行这些操作前要先做登陆状态的验证. 比如:点赞,发布,评论等需要验证,都需 ...
- Http-server 的使用
Http-server 是一款基于node.js的web前端开发服务,可以很好的承担前后端解耦后,前端服务的搭建. 1,首先安装node node下载地址:https://nodejs.org/zh- ...
- 【Python爬虫】正则表达式与re模块
正则表达式与re模块 阅读目录 在线正则表达式测试 常见匹配模式 re.match re.search re.findall re.compile 实战练习 在线正则表达式测试 http://tool ...
- python全栈开发day12
列表 创建列表: 基本操作: 索引 切片 追加 删除 长度 切片 循环 包含 #######################列表list类中提供的方法######################## ...
- linux 循环读取文件的每一行
在Linux中有很多方法逐行读取一个文件的方法,其中最常用的就是下面的脚本里的方法,而且是效率最高,使用最多的方法.为了给大家一个直观的感受,我们将通过生成一个大的文件的方式来检验各种方法的执行效率. ...
- luogu4389 付公主的背包
题目链接:洛谷 题目大意:现在有$n$个物品,每种物品体积为$v_i$,对任意$s\in [1,m]$,求背包恰好装$s$体积的方案数(完全背包问题). 数据范围:$n,m\leq 10^5$ 这道题 ...
- 内核block机制
内核版本:linux2.6.22.6 硬件平台:JZ2440 驱动源码 block_ipc_poll_key_int_drv.c : #include <linux/module.h> # ...
- PHP三种运行方式（转载）
三种运行方式:mod_php5.cgi.fast-cgi 1. 通过HTTPServer内置的模块来实现, 例如Apache的mod_php5,类似的Apache内置的mod_perl可以对perl支 ...