移动端rem使用及理解
先上代码
window.onload = function(){
getRem(720,100)
};
window.onresize = function(){
getRem(720,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
首先我们要明白为什么使用rem,rem有什么作用?
rem: 继承于html的font-size大小,比如html的font-size等于16px,那么1rem 就等于16px。
这里既然rem可以继承 html 的font-size的大小,我们可以使用 监听窗口的大小,来动态改变html 的font-size 来使得页面兼容于各个移动端手机。 举例
移动端 屏幕宽除以设计图宽得到比例,比如屏幕宽等于750px,设计图宽等于1000px,750除以1000得到0.75px,等于说是设计图的1px,在浏览器上展示的大小为0.75px,这里我们要继承这个比例大小,采用rem的方法,继承html的font-size大小的方法去实现,设置html的font-size等于 0.75px(屏幕的0.75px相当于设计图的1px),rem会继承html的font-size大小,所以我们在页面里面使用的1rem就等于设计图的1px,后面可以忽略(为了方便我们可以把得到的设计图和屏幕宽的比例乘以100,等于75,现在1rem等于设计图的100px,0.01rem等于设计图的1px。
公式 屏幕宽度 / 设计图宽度 * 100 = html font-size(0.01rem 等于设计图的 1px) 有什么不足或错误的,请大家指出,第一次发博客,发一下自己的感悟和理解
移动端rem使用及理解的更多相关文章
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 移动端rem适应布局
移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
随机推荐
- linux用户和组 之 用户管理
一. linux 用户和组的基本介绍 1.linux下 有三种用户: 1. root: 权限最大的. 2. 系统用户: UID小于1000的.系统服务管理用户,一般是不允许登录系统的.(比如mysql ...
- CSP 通信网络(201709-4)
问题描述 某国的军队由N个部门组成,为了提高安全性,部门之间建立了M条通路,每条通路只能单向传递信息,即一条从部门a到部门b的通路只能由a向b传递信息.信息可以通过中转的方式进行传递,即如果a能将信息 ...
- php网络请求
get请求 /** * get请求 * @param $url,请求地址 * @return bool|string */ function getRequest($url){ $headerArra ...
- Docker-PS命令解析
查看 docker 容器,必然要用到 docker ps 命令.其基本格式为: docker ps [OPTIONS] 关键在于 OPTIONS(选项): 1 常见用法 1. 最常见的用法 $ doc ...
- STM32的堆与栈与编译信息查看
STM32的堆与栈与编译信息查看 因为一个项目中使用malloc函数动态分配内存400多个字节,返回为0,分配失败.查找失败原因,为堆空间不足分配导致.查看堆和栈分别设置了2K,按正常情况看应能满足分 ...
- Centos系统修改docker默认网络参数
刚Yum装完发现是没有网上所说的/etc/default/docker文件的,自己vim后其实也是不生效的. 因为Docker的systemd启动脚本(/usr/lib/systemd/system/ ...
- 服务端相关知识学习(六)Zookeeper client
Zookeeper的client是通过Zookeeper类提供的.前面曾经说过,Zookeeper给使用者提供的是一个类似操作系统的文件结构,只不过这个结构是分布式的.可以理解为一个分布式的文件系统. ...
- MyBatis-plus 新增实例,主键ID从很大的数字开始
mybatis-plus是mybatis增强版,用mybatis-plus可以省去很多DAO层代码和数据库操作语句的编写.但是需要我们配置好条件. 情景: 向数据库新增一条实例,我们要调用 inser ...
- Redis+Sentinel安装与配置
在这里我们搭建的是一个1主3从的redis+3个哨兵集群的环境,由于是在一台物理机上,所有我们用端口区分. 物理机IP:192.168.0.12 主节点master端口:6301 从节点slave1端 ...
- 剖析isinstance的实现机制
python的自省机制也是其一大彪悍的特性,对于任何一个对象,我们都可以准确的获取其类型. print(type(123)) print(type("")) print(type( ...