移动端适配之终极适配方案rem适配
时间:2022-06-08
本文章向大家介绍移动端适配之终极适配方案rem适配,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题!这次这个rem终极适配方案,是目前移动端的较为完美的适配方案!
简单介绍一下这个rem适配
px 固定值,设置多少就是多少不随屏幕大小改变 em 相对于自身字体大小 font-size:12px; 1em=12px em引发问题 1.chrome浏览器下规定字体最小12px 2.如果两个元素的字体规格不一样就是分别就行设置,不方便设置 rem:css3新增的相对单位,相对于根节点(html)字体设置 html{ font-size:12px; } 1rem=12px,5rem=60px;
首先要去设置这个html(根节点的字体大小),rem是根据这个根节点的字体大小进行适配!
当然去适配的时候这个根节点的大小如何设置才能更好适配呢?这个就是问题,那么就要去动态设置这个根节点大小
<script>
/*动态根据屏幕大小进行设置相对的根节点字体大小
*
* */
var html=document.documentElement;
var width=window.screen.width;
//以当前设备宽度16分之一为当前根节点
html.style.fontSize=width/16+'px';
</script>
或许有疑问这个16怎么而来的,这个16是任意设置的,设置16是一iphone5为例,独立设备像素的320为例,每一小份是20px,则在ip5下,根节点1rem=20px 那么这个px转rem怎么进行转换
可以使用rem简单搞定!
less文件
@rem:20rem;
.box{
width:180/@rem;
height:245/@rem;
background-color: hotpink;
}
在iphone5下,1/16代表20px,那么在less文件中的声明的rem变量就为20rem(代码需要设置的像素/这个20px),width:180/@rem,在iphone6下显示为宽度180px,则自动换算对于rem; 当然rem与px的转换在hbulider的设置内也可以设置相互转换;
- tensorflow(一)windows 10 python3.6安装tensorflow1.4与基本概念解读
- 基于AgileEAS.NET SOA 中间件领域模型数据器快速打造自己的代码生成器
- Java基础-day07-代码题-自定义数据类型;ArrayList集合
- 一条报警信息的快速处理和分析(r9笔记第99天)
- 【Go 语言社区】解析Go语言编程中的struct结构
- centos+scala2.11.4+hadoop2.3+spark1.3.1环境搭建
- 【Go 语言社区】Golang 语言获取本机逻辑CPU数量的方法
- Data Guard搭建困境突围(一)(r10笔记第17天)
- Java基础-day07-知识点相关题-自定义数据类型;ArrayList
- windows10 tensorflow(二)原理实战之回归分析,深度学习框架(梯度下降法求解回归参数)
- 本人为巨杉数据库(开源NoSQL)写的C#驱动,支持Linq,全部开源,已提交github
- 最近的几个技术问题总结和答疑(九)(r10笔记第16天)
- AgileEAS.NET SOA中间件平台更新日志 2015-04-28
- 【Go 语言社区】Golang语言操作redis连接池的方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 谈谈SOCKET
- 使用ABAP实现Mock测试工具Mockito
- 增强版本的自开发SAP WebClient UI Repository Information System
- 最大子序列和的问题的解(1)
- 10-STM32+ESP8266+AIR202远程升级方案-功能3-手机APP控制STM32远程更新固件程序,基于ESP8266
- 最大子序列和的接口函数(2)
- 最大子序列和的接口函数(3)
- 【剑指Offer】二叉树的深度
- 运行时间中的对数
- IIC协议
- 通过例子学习编写shell
- 【redis6.0.6】redis源码慢慢学,慢慢看 -- 第三天:MakeFile
- 继续学习Shell脚本(详细)
- 将linux终端的输出信息保存到log中
- UNIX网络编程卷1(第三版)一个简单的时间获取服务器的程序