移动端的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 ...
随机推荐
- Codeforces 44E - Anfisa the Monkey - [水题]
题目链接:http://codeforces.com/problemset/problem/44/E 题意: 给一个字符串,让你分割成 $k$ 行,每行的字母数在 $[a,b]$ 之间. 题解: 这是 ...
- [No0000F3]C# 结构（Struct）
在 C# 中,结构是值类型数据结构.它使得一个单一变量可以存储各种数据类型的相关数据.struct关键字用于创建结构. 结构是用来代表一个记录.假设您想跟踪图书馆中书的动态.您可能想跟踪每本书的以下属 ...
- [No0000E2]Vmware虚拟机安装 苹果系统 mac OS 10.12
1.下载并安装Vmware:实验版本号:VMware-workstation-full-12.5.5-5234757:(忽略网上说的这个版本不行.可以装C盘,不过转C盘后后面都要用管理员权限运行其他软 ...
- [No0000A5]批处理常用命令大全&&21个DOS常用命令
1.Echo 命令打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置.语法echo [{on|off}] [message]Sample: echo off e ...
- Appium-两个小报错
(1) 执行脚本appium报错:> info: [debug] Emulator not running appium设置中取消勾选launch avd解决 (2)执行脚本python ...
- java ipv4校验正则字符串
String IPV4_REGEX = "\\A(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)) ...
- ab压力测试工具的使用
一.下载稳定版2.2.31 http://httpd.apache.org/ 二.2.2.*和2.4.*区别? httpd-2.2.x(prefork) httpd-2.4.x(event) 编 ...
- python练习题-day5
1.有如下变量(tu是个元祖),请实现要求的功能 tu = ("alex", [11, 22, {"k1": 'v1', "k2": [&q ...
- python datetime 模块
import datetime datetime.datetime.now() 打印本地当前时间 >>> print(datetime.datetime.now()) 2017-12 ...
- 前端 HTML 常用标签 head标签相关内容 title标签 网页的标题信息
title标签 <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中. 可以把它看成是一个网页 ...